Skip to content

Commit

Permalink
让提示信息更详细
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeafYeeXYZ
LeafYeeXYZ committed Apr 17, 2024
1 parent cf27fd1 commit 76c2c42
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 29 deletions.
7 changes: 6 additions & 1 deletion src/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Prompt from './Prompt.jsx'
import Dialog from './Dialog.jsx'
import LangSwitcher from './Widgets/LangSwitcher.jsx'
// Hook
import { useState, useEffect } from 'react'
import { useState, useEffect, useRef } from 'react'
import useDialog from '../libs/useDialog.jsx'
// 其他
import check from '../libs/check.js'
Expand Down Expand Up @@ -60,6 +60,9 @@ function App() {
const { dialogState, dialogAction, dialogRef } = useDialog()
// 声明一个状态变量，用于记录中文提示词模式
const [zhMode, setZhMode] = useState(false)
// 声明一个 ref, 用于记录是否有正在进行的操作
const status = useRef('')
// 初始化操作
useEffect(() => {
// 视情况弹出更新提示
versionInfo && dialogAction(versionInfo)
Expand All @@ -77,13 +80,15 @@ function App() {
setImages={setImages}
zhMode={zhMode}
dialogAction={dialogAction}
status={status}
/>

<Prompt
images={images}
setImages={setImages}
dialogAction={dialogAction}
zhMode={zhMode}
status={status}
>
<LangSwitcher
setZhMode={setZhMode}
Expand Down
19 changes: 9 additions & 10 deletions src/components/Images.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,23 @@ import { cloneDeep } from 'lodash-es'
import PropTypes from 'prop-types'
import '../styles/Images.css'

function Images({ images, setImages, zhMode, dialogAction }) {
function Images({ images, setImages, zhMode, dialogAction, status }) {
// 操作进行前检测函数
function callback(e, image, func) {
e.preventDefault()
const loading = document.querySelector('.image-loading')
if (loading) {
dialogAction({ type: 'open', title: '错误', content: '请等待当前图片生成或下载完成' })
if (status.current) {
dialogAction({ type: 'open', title: '提示', content: `请等待${status.current}完成` })
} else {
// 创建一个隐藏的 .image-loading 元素, 以避免在收藏时进行其他操作
const loading = document.createElement('div')
loading.className = 'image-loading'
loading.style.display = 'none'
document.body.appendChild(loading)
// 处理操作
func(image)
.then(() => document.body.removeChild(loading))
.then(() => status.current = '')
.catch(error => alert(`未捕获: Images -> ${func.name} -> ${error}`))
}
}

// 收藏按钮点击事件
async function handleStar(image) {
status.current = '收藏'
try {
if (image.star) {
// 如果取消收藏, 从 IndexedDB 中删除
Expand Down Expand Up @@ -65,10 +60,12 @@ function Images({ images, setImages, zhMode, dialogAction }) {
}
// 提示词按钮点击事件
async function handleInfo(image) {
status.current = '提示词'
dialogAction({ type: 'open', title: '本图提示词', content: image.prompt })
}
// 删除按钮点击事件
async function handleDelete(image) {
status.current = '删除'
if (image.star) {
dialogAction({ type: 'open', title: '错误', content: '请先取消收藏再删除' })
} else {
Expand All @@ -79,6 +76,7 @@ function Images({ images, setImages, zhMode, dialogAction }) {
}
// 下载按钮点击事件
async function handleDownload(image) {
status.current = '下载'
const filename = `${image.prompt.replace(/\(([^)]*)\)/, '').trim()}.png`
const a = document.createElement('a')
a.href = image.base64
Expand Down Expand Up @@ -161,6 +159,7 @@ Images.propTypes = {
setImages: PropTypes.func.isRequired,
zhMode: PropTypes.bool.isRequired,
dialogAction: PropTypes.func.isRequired,
status: PropTypes.object.isRequired,
}

export default Images
51 changes: 33 additions & 18 deletions src/components/Prompt.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,20 @@ for (const model in models) {
// 获取加载图片
const loadingImage = await getLoadingImage()

function Prompt({ children, images, setImages, dialogAction, zhMode }) {
function Prompt({ children, images, setImages, dialogAction, zhMode, status }) {
// 引用元素
const submitRef = useRef(null)
const promptRef = useRef(null)
const modelRef = useRef(null)
// 点击生成按钮时的事件处理函数
async function handleSubmit(event, prompt) {
event.preventDefault()
if (status.current) {
dialogAction({ type: 'open', title: '提示', content: `请等待${status.current}完成` })
return
} else {
status.current = '生成图片'
}
try {
// 禁用按钮
submitRef.current.disabled = true
Expand All @@ -34,11 +40,11 @@ function Prompt({ children, images, setImages, dialogAction, zhMode }) {
// 获取用户输入的提示词
const text = prompt || promptRef.current.value
// 如果用户没有输入提示词，不发送请求
if (!text) throw '请输入提示词'
if (!text) throw { title: '提示', message: '请输入提示词', deleteLoading: false, self: true }
// 获取模型名称
const model = modelRef.current.value
// 如果没有选择模型，不发送请求
if (!model) throw '请选择模型'
if (!model) throw { title: '提示', message: '请选择模型', deleteLoading: false, self: true }
// 插入加载图片
const modifiedImages = cloneDeep(images)
modifiedImages.unshift(loadingImage)
Expand All @@ -51,7 +57,7 @@ function Prompt({ children, images, setImages, dialogAction, zhMode }) {
// 解析响应体
const blob = await res.blob()
// 根据图片大小判断是否为错误信息
if (blob.size < 1024) throw { message: '服务端返回空白图片, 可能是服务器错误或提示词不当', deleteLoading: true }
if (blob.size < 1024) throw { title: '生成失败', message: '服务端返回空白图片, 可能是服务器错误或提示词不当', deleteLoading: true, self: true }
// 获取图片 Hash
const hash = await getHash(blob)
// 转换为 base64
Expand All @@ -61,30 +67,36 @@ function Prompt({ children, images, setImages, dialogAction, zhMode }) {
const updatedImages = currentImages.filter(image => image.type !== 'loading')
updatedImages.unshift({ base64, type: 'image', star: false, hash, prompt: `${text} (${models[model]})` })
setImages(updatedImages)
// 启用按钮
submitRef.current.disabled = false
// 设置按钮文本
submitRef.current.textContent = '生成'
}
catch (error) {
} catch (error) {
// 移除加载图片, 打开对话框
if (typeof error === 'object' && error.deleteLoading) {
const currentImages = cloneDeep(images)
const modifiedImages = currentImages.filter(image => image.type !== 'loading')
setImages(modifiedImages)
if (typeof error === 'object' && error.self) {
if (error.deleteLoading) {
const currentImages = cloneDeep(images)
const modifiedImages = currentImages.filter(image => image.type !== 'loading')
setImages(modifiedImages)
}
dialogAction({ type: 'open', title: '生成失败', content: error.message })
} else {
dialogAction({ type: 'open', title: '生成失败', content: `Prompt -> handleSubmit -> ${error}` })
}
} finally {
// 启用按钮
submitRef.current.disabled = false
// 设置按钮文本
submitRef.current.textContent = '生成'
}
// 重置状态
status.current = ''
}
}
// 中文模式的事件处理函数
async function handleSubmitZH(event) {
event.preventDefault()
if (status.current) {
dialogAction({ type: 'open', title: '提示', content: `请等待${status.current}完成` })
return
} else {
status.current = '翻译提示词'
}
// 禁用按钮
submitRef.current.disabled = true
// 设置按钮文本
Expand Down Expand Up @@ -118,16 +130,18 @@ function Prompt({ children, images, setImages, dialogAction, zhMode }) {
})
const data = await res.json()
textEN = data.result.translated_text
}
catch (error) {
} catch (error) {
// 打开对话框
dialogAction({ type: 'open', title: '翻译失败', content: `Prompt -> handleSubmitZH -> ${error} (请尝试使用英文模式)` })
dialogAction({ type: 'open', title: '翻译失败', content: `${error} (请尝试使用英文模式)` })
// 启用按钮
submitRef.current.disabled = false
// 设置按钮文本
submitRef.current.textContent = '生成'
// 退出
return
} finally {
// 重置状态
status.current = ''
}
// 调用英文模式的事件处理函数
handleSubmit(event, textEN)
Expand Down Expand Up @@ -171,6 +185,7 @@ Prompt.propTypes = {
setImages: PropTypes.func.isRequired,
dialogAction: PropTypes.func.isRequired,
zhMode: PropTypes.bool.isRequired,
status: PropTypes.object.isRequired,
children: PropTypes.element,
}

Expand Down

0 comments on commit 76c2c42

Please sign in to comment.