完成AI生成图片，center组件正确显示

slince-zero · May 9, 2024 · ab8377e · ab8377e
1 parent 7d36c88
commit ab8377e
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 50 deletions.
diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -35,6 +35,13 @@ export default function ImgContextProvider({
   // 用于判断是否是上传图片，还是默认通过API获取的图片
   const [isUpload, setIsUpload] = useState(false)
 
+  // 用于用户输入的AI图片描述
+  const [aiValue, setAiValue] = useState('')
+  // 用于AI生成图片的url
+  const [aiResult, setAiResult] = useState<any>(null)
+  // loading
+  const [loadingAIImage, setLoadingAIImage] = useState(false)
+
   // 图片比例
   const [proportionValue, setProportionValue] = useState('aspect-[16/9]')
 
@@ -225,6 +232,53 @@ export default function ImgContextProvider({
   function handleChangeBoardPenColor(color: any) {
     setBoardPenColor(color.hex.toUpperCase())
   }
+
+  // 发送请求
+  async function query(data: any) {
+    const response = await fetch(
+      'https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0',
+      {
+        headers: {
+          Authorization: 'Bearer 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',
+        },
+        method: 'POST',
+        body: JSON.stringify(data),
+      }
+    )
+    const result = await response.blob()
+    return result
+  }
+
+  // 生成AI图片
+  function handleGenerateAIImage() {
+    try {
+      setLoadingAIImage(true)
+      const data = {
+        inputs: aiValue,
+      }
+      query(data).then((res) => {
+        const url = URL.createObjectURL(res)
+        setAiResult(url)
+        setLoadingAIImage(false)
+      })
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  // 提交AI图片到center组件
+  function handleSubmitAIImage() {
+    console.log('111', aiResult)
+
+    setImgInfo({
+      urls: {
+        regular: aiResult,
+      },
+    })
+  }
+
+
+
   return (
     <ImgContext.Provider
       value={{
@@ -269,6 +323,11 @@ export default function ImgContextProvider({
         handleChangeBoardPenColor,
         isCircle,
         handleIsCircle,
+        setAiValue,
+        aiResult,
+        loadingAIImage,
+        handleGenerateAIImage,
+        handleSubmitAIImage,
       }}>
       {children}
     </ImgContext.Provider>

diff --git a/src/page/center/index.tsx b/src/page/center/index.tsx
@@ -24,6 +24,8 @@ export default function CenterBoard() {
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
+    console.log(imgInfo,'aaaa');
+
     if (imgInfo?.urls != null) {
       setIsLoading(true)
     }

diff --git a/src/page/left/index.tsx b/src/page/left/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@nextui-org/react'
 import { UploadLogo } from './logo'
 import { ImgContext } from '@/context'
-import { Key, useContext, useEffect, useState } from 'react'
+import { Key, useContext } from 'react'
 
 export default function LeftBoard() {
   const {
@@ -29,16 +29,15 @@ export default function LeftBoard() {
     setImgInfo,
     uploadImage,
     setIsUpload,
+    setAiValue,
+    aiResult,
+    loadingAIImage,
+    handleGenerateAIImage,
+    handleSubmitAIImage,
   } = useContext(ImgContext)
 
   // 用于AI生成图片的弹出窗
   const { isOpen, onOpen, onClose } = useDisclosure()
-  // 用于用户输入的AI图片描述
-  const [aiValue, setAiValue] = useState('')
-  // 用于AI生成图片的url
-  const [aiResult, setAiResult] = useState<any>(null)
-  // loading
-  const [loading, setLoading] = useState(false)
 
   function handleUploadImage(event: any) {
     const file = event.target.files[0]
@@ -54,48 +53,6 @@ export default function LeftBoard() {
     onOpen()
   }
 
-  // 发送请求
-  async function query(data: any) {
-    const response = await fetch(
-      'https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0',
-      {
-        headers: {
-          Authorization: 'Bearer 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',
-        },
-        method: 'POST',
-        body: JSON.stringify(data),
-      }
-    )
-    const result = await response.blob()
-    return result
-  }
-
-  // 生成AI图片
-  function handleGenerateAIImage() {
-    try {
-      setLoading(true)
-      const data = {
-        inputs: aiValue,
-      }
-      query(data).then((res) => {
-        const url = URL.createObjectURL(res)
-        setAiResult(url)
-        setLoading(false)
-      })
-    } catch (e) {
-      console.log(e)
-    }
-  }
-
-  // 提交AI图片到center组件
-  function handleSubmitAIImage() {
-    console.log('111', aiResult)
-
-    setImgInfo({
-      urls: aiResult,
-    })
-  }
-
   return (
     <div className='flex flex-col bg-slate-500 h-screen'>
       <>
@@ -220,7 +177,7 @@ export default function LeftBoard() {
                       <Button
                         color='success'
                         className='ml-2'
-                        isLoading={loading}
+                        isLoading={loadingAIImage}
                         onClick={handleGenerateAIImage}>
                         生成
                       </Button>
@@ -245,6 +202,7 @@ export default function LeftBoard() {
                   </Button>
                   <Button
                     onClick={handleSubmitAIImage}
+                    onPress={onClose}
                     className='bg-gradient-to-tr from-pink-500 to-yellow-500'>
                     使用
                   </Button>