新增图片生成提示词功能

LeafYeeXYZ · May 10, 2024 · e84cc16 · e84cc16
1 parent 6e6b13b
commit e84cc16
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 6 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -8,6 +8,7 @@ import Dialog from './Dialog.tsx'
 import LangSwitcher from './Widgets/LangSwitcher.tsx'
 import ModeSwitcher from './Widgets/ModeSwitcher.tsx'
 import ImageSelector from './Widgets/ImageSelector.tsx'
+import PromptGenerator from './Widgets/PromptGenerator.tsx'
 // Hook
 import { useState, useEffect, useRef } from 'react'
 import { useDialog } from '../libs/useDialog.tsx'
@@ -51,6 +52,8 @@ export function App() {
   const status = useRef('')
   // 图片选择器
   const imageSelectorRef = useRef<HTMLInputElement>(null)
+  // 提示词输入区
+  const promptRef = useRef<HTMLTextAreaElement>(null)
   // 初始化操作
   useEffect(() => {
     // 视情况弹出更新提示
@@ -80,6 +83,7 @@ export function App() {
         geneMode={geneMode}
         fileRef={imageSelectorRef}
         setLoadingImage={setLoadingImage}
+        promptRef={promptRef}
       >
         <div className="widgets">
           <LangSwitcher 
@@ -102,6 +106,12 @@ export function App() {
         dialogAction={dialogAction}
       />
 
+      <PromptGenerator 
+        status={status}
+        dialogAction={dialogAction}
+        promptRef={promptRef}
+      />
+
     </main>
   )
 }
diff --git a/src/components/Images.tsx b/src/components/Images.tsx
@@ -131,8 +131,7 @@ function Images({ currentImages, setCurrentImages, langMode, dialogAction, statu
       <div className="images-intro">
         <span>
           这里是赛博画师小叶子<br />
-          在下方输入<span className='images-intro-lang'>{langMode === 'zh' ? '中文' : '英文'}</span>提示词并点击生成<br />
-          大部分模型输入自然语言即可<br />
+          请输入<span className='images-intro-lang'>{langMode === 'zh' ? '中文' : '英文'}</span>提示词并点击生成<br />
           本站开源于 <a href='https://github.com/LeafYeeXYZ/PainterLeaf' target='_blank'>GitHub ↗</a>
         </span>
       </div>

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
@@ -41,6 +41,7 @@ interface PromptProps {
   geneMode: 'textToImage' | 'imageToImage'
   fileRef: React.RefObject<HTMLInputElement>
   setLoadingImage: React.Dispatch<React.SetStateAction<React.JSX.Element | null>>
+  promptRef: React.RefObject<HTMLTextAreaElement>
 }
 
 class ErrorInfo {
@@ -52,11 +53,10 @@ class ErrorInfo {
   }
 }
 
-function Prompt({ children, currentImages, setCurrentImages, dialogAction, langMode, status, geneMode, fileRef, setLoadingImage }: PromptProps) {
+function Prompt({ children, currentImages, setCurrentImages, dialogAction, langMode, status, geneMode, fileRef, setLoadingImage, promptRef }: PromptProps) {
 
   // 引用元素
   const submitRef = useRef<HTMLButtonElement>(null)
-  const promptRef = useRef<HTMLTextAreaElement>(null)
   const modelRef = useRef<HTMLSelectElement>(null)
 
   // 翻译函数

diff --git a/src/components/Widgets/ImageSelector.tsx b/src/components/Widgets/ImageSelector.tsx
@@ -25,11 +25,11 @@ function ImageSelector({ ref, geneMode, dialogAction }: ImageSelectorProps) {
           if (!event.target.files) return
           const file = event.target.files[0]
           // 限制图片大小
-          if (file.size > 10 * 1024 * 1024) {
+          if (file.size > 5 * 1024 * 1024) {
             dialogAction({
               type: 'open',
               title: '图片过大',
-              content: '请选择小于 10MB 的图片',
+              content: '请选择小于 5MB 的图片',
             })
             event.target.value = ''
             return

diff --git a/src/components/Widgets/PromptGenerator.tsx b/src/components/Widgets/PromptGenerator.tsx
@@ -0,0 +1,97 @@
+import type { DialogAction } from '../../libs/useDialog'
+import { SERVER } from '../../config.json'
+import { useRef, useState } from 'react'
+import { LoadingOutlined } from '@ant-design/icons'
+import { flushSync } from 'react-dom'
+
+interface PromptGeneratorProps {
+  status: React.MutableRefObject<string>
+  dialogAction: React.Dispatch<DialogAction>
+  promptRef: React.RefObject<HTMLTextAreaElement>
+}
+
+export default function PromptGenerator({ status, dialogAction, promptRef }: PromptGeneratorProps) {
+
+  const initText: React.JSX.Element = <span>用图片生成提示词</span>
+  const loadText = <span>生成提示词中 <LoadingOutlined /></span>
+  const textRef = useRef<HTMLParagraphElement>(null)
+  const [text, setText] = useState<React.JSX.Element>(initText)
+  const lebalRef = useRef<HTMLLabelElement>(null)
+
+  async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!e.target.files) return
+    try {
+      // 设置状态
+      status.current = '生成提示词'
+      e.target.disabled = true
+      lebalRef.current!.style.cursor = 'not-allowed'
+      lebalRef.current!.style.filter = 'grayscale(0.9)'
+      lebalRef.current!.style.opacity = '0.9'
+      flushSync(() => setText(loadText))
+      // 检测文件大小
+      const file = e.target.files[0]
+      if (file.size > 2 * 1024 * 1024) {
+        dialogAction({
+          type: 'open',
+          title: '图片过大',
+          content: '请选择小于 2MB 的图片',
+        })
+        return
+      }
+      // 读取文件
+      const uint8array = new Uint8Array(await file.arrayBuffer())
+      // 发送请求
+      const res = await fetch(`${SERVER}/painter/genprompt`, {
+        method: 'POST',
+        body: JSON.stringify({
+          image: Array.from(uint8array),
+        }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      // 处理返回数据
+      const data = await res.json()      
+      const prompt = data.result.description as string
+      // 设置提示词
+      promptRef.current!.value = prompt
+    } catch (error) {
+      if (error instanceof Error) {
+        dialogAction({
+          type: 'open',
+          title: '错误',
+          content: `提示词生成失败：${error.name} - ${error.message}`
+        })
+      }
+    } finally {
+      status.current = ''
+      e.target.value = ''
+      e.target.disabled = false
+      lebalRef.current!.style.cursor = 'pointer'
+      lebalRef.current!.style.filter = 'grayscale(0)'
+      lebalRef.current!.style.opacity = '0.3'
+      setText(initText)
+    }
+  }
+
+  return (
+    <label 
+      className='prompt-generator-container'
+      htmlFor='prompt-generator-input'
+      ref={lebalRef}
+    >
+      <input
+        type="file"
+        accept='image/png, image/jpeg'
+        name='prompt-generator-input'
+        id='prompt-generator-input'
+        style={{ opacity: 0, width: 0 }}
+        onChange={handleFileChange}
+      />
+      <span
+        className='prompt-generator-text'
+        ref={textRef}
+      >
+        {text}
+      </span>
+    </label>
+  )
+}
diff --git a/src/styles/Widgets.css b/src/styles/Widgets.css
@@ -68,3 +68,37 @@
   cursor: not-allowed;
 }
 
+
+.prompt-generator-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 161px;
+  right: calc(10% + 7px);
+  width: 108px;
+  height: 21px;
+
+  font-size: 0.7rem;
+  font-weight: bold;
+  color: var(--text);
+  background-color: var(--back-filearea);
+  border: 1px solid var(--text);
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  /* 文字省略号 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  opacity: 0.3;
+  &:hover {
+    opacity: 0.9!important;
+  }
+}
+@media screen and (min-width: 768px) {
+  .prompt-generator-container {
+    bottom: 111px;
+  }
+}