feature: Component extraction

src/AIModels/SDXLLightning.tsx

@@ -4,23 +4,22 @@ import {SDXLLightningCredentials} from "./env.ts";
 import {ImgComponent} from "../component/ImgComponent/ImgComponent.tsx";
 import {useState} from "react";
 import {AnyObject} from "../type/common.ts";
-import css from './SDXLLightning.module.less'
 
 fal.config({
   credentials: SDXLLightningCredentials, // or a function that returns a string
 });
 
-const demoPrompt = [
-  'this is a photo,Next to a big river in the real world,The mouse and the lion are talking',
-  'moon'
-]
 
 
-// url: https://huggingface.co/ByteDance/SDXL-Lightning
-export function SDXLLightning() {
 
+// url: https://huggingface.co/ByteDance/SDXL-Lightning
+interface SDXLLightningProps  {
+  inputs: string
+  setInputs: React.Dispatch<React.SetStateAction<string>>
+}
+export function SDXLLightning(props:SDXLLightningProps) {
+  const {inputs,setInputs } = props
   const [imgUrl,setImgUrl ] = useState<string>('')
-  const [inputs, setInputs] = useState<string>('')
   const  onClick = async () => {
     const result = await fal.subscribe("110602490-fast-sdxl", {
       input: {
@@ -37,21 +36,12 @@ export function SDXLLightning() {
     setInputs(e.target.value)
   }
 
-  const onClickDemo =  (e:React.MouseEvent) => {
-    const target = e.target as HTMLDivElement;
-    setInputs(target.innerText)
-  }
 
   return (
     <div>
       <div>
         <ImgComponent src={imgUrl} />
       </div>
-      <div onClick={onClickDemo}>
-        {demoPrompt.map((item,index) => {
-            return (<div className={css.demoItem} key={index}>{item}</div>)
-          })}
-      </div>
 
       <div>
         <input defaultValue={inputs} onChange={onChange}/>

src/AIModels/UtilityPole.tsx

@@ -3,9 +3,14 @@ import React from "react";
 import { useState } from 'react'
 import {AnyObject} from "../type/common.ts";
 import {ImgComponent} from "../component/ImgComponent/ImgComponent.tsx";
-export function UtilityPole() {
+
+interface UtilityPoleProps {
+  inputs: string
+  setInputs: React.Dispatch<React.SetStateAction<string>>
+}
+export function UtilityPole(props:UtilityPoleProps) {
+  const {inputs,setInputs } = props
   const [imgUrl,setImgUrl ] = useState<string>('')
-  const [inputs, setInputs] = useState<string>('')
   async function query(data:AnyObject) {
     const response = await fetch(
       "https://api-inference.huggingface.co/models/BotsOne/utilitypole",

src/App.tsx

@@ -1,12 +1,29 @@
 import './App.css'
 import {UtilityPole} from "./AIModels/UtilityPole.tsx";
 import {SDXLLightning} from "./AIModels/SDXLLightning.tsx";
+import React, {useState} from "react";
+import css from "./AIModels/SDXLLightning.module.less";
 
 function App() {
+  const demoPrompt = [
+    'this is a photo,Next to a big river in the real world,The mouse and the lion are talking',
+    'a moon and a little girl'
+  ]
+  const [inputs, setInputs] = useState<string>('')
+  const onClickDemo =  (e:React.MouseEvent) => {
+    const target = e.target as HTMLDivElement;
+    setInputs(target.innerText)
+  }
   return (
     <>
-      <UtilityPole />
-      <SDXLLightning />
+
+      <div onClick={onClickDemo}>
+        {demoPrompt.map((item,index) => {
+          return (<div className={css.demoItem} key={index}>{item}</div>)
+        })}
+      </div>
+      <UtilityPole inputs={inputs} setInputs={setInputs} />
+      <SDXLLightning inputs={inputs} setInputs={setInputs} />
     </>
   )
 }