import { useEffect, useRef, useState } from "react"; import Head from "next/head"; import axios from "axios"; import CheckIcon from "@mui/icons-material/Check"; import ClearIcon from "@mui/icons-material/Clear"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import VisibilityIcon from "@mui/icons-material/Visibility"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import HourglassTopIcon from "@mui/icons-material/HourglassTop"; import PlayArrowIcon from "@mui/icons-material/PlayArrow"; import ReplayIcon from "@mui/icons-material/Replay"; import TextField from "@mui/material/TextField"; import { Fira_Code } from "next/font/google"; import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; import Accordion from "@mui/material/Accordion"; import Typography from "@mui/material/Typography"; import AccordionSummary from "@mui/material/AccordionSummary"; import AccordionDetails from "@mui/material/AccordionDetails"; import Paper from "@mui/material/Paper"; import IconButton from "@mui/material/IconButton"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import { nanoid } from "nanoid"; import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemButton from "@mui/material/ListItemButton"; import ListItemText from "@mui/material/ListItemText"; const base = { default: "/** 1.Base Script */const canvas=document.querySelector('canvas');", }; const fontMono = Fira_Code({ subsets: ["latin"], }); export default function Home() { const ref = useRef(null); const [template, setTemplate] = useState(base.default); const [runningId, setRunningId] = useState("1"); const [activeId, setActiveId] = useState("1"); const [answers, setAnswers] = useState<{ id: string; content: string; task: string }[]>([ { id: "1", content: base.default, task: "Base Script", }, ]); const [loading, setLoading] = useState(false); useEffect(() => { const current = answers.find(({ id }) => id === runningId); if (current) { void axios.post("/api/run", { content: current.content, }); } }, [runningId, answers]); const current = answers.find(({ id }) => id === activeId); return ( { event.preventDefault(); const formData = new FormData(event.target as HTMLFormElement); const formObject = Object.fromEntries(formData); try { setLoading(true); const { data } = await axios.post("/api/gpt", formObject); const answer = data; setAnswers([answer, ...answers]); setRunningId(answer.id); } catch (error) { console.error(error); } finally { setLoading(false); } }} > {loading ? : } {current?.task} - {current?.id ?? ""} { await axios.post("/api/run", { content: "/** 1.Base Script */const canvas=document.querySelector('canvas');", }); setActiveId("1"); setTemplate( "/** 1.Base Script */const canvas=document.querySelector('canvas');" ); }} > Based on: {current?.task ?? "Base Script"} } aria-controls="panel1a-content" id="panel1a-header" > Options { setTemplate(event.target.value); }} /> {answers.map(answer => { return ( {answer.id === "1" ? undefined : ( { setAnswers( answers.filter(({ id }) => id !== answer.id) ); }} > )} { setRunningId(answer.id); }} > {runningId === answer.id ? ( ) : ( )} } disablePadding > { setActiveId(answer.id); setTemplate(answer.content); }} > {activeId === answer.id ? ( ) : ( )} ); })} { if (ref.current) { ref.current.src = `//localhost:8080?${nanoid()}`; } }} > ); }