Update interface

server/app.py

@@ -9,10 +9,11 @@ from typing import Optional
 
 generate_questions_service = GenerateQuestionsService()
 
+
 class Body(BaseModel):
-    matter: str
-    subject: str
-    difficultie: str
+    school_subject: Optional[str] = None
+    subject: Optional[str] = None
+    difficultie: Optional[str] = None
     promptValue: Optional[str] = None
 
 
@@ -25,21 +26,24 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+
 @app.post("/generate_questions")
 async def generate_questions(body: Body):
     print(body)
-    matter = body.matter
-    subject = body.subject
-    difficultie = body.difficultie
     if body.promptValue:
         query = body.promptValue
     else:
+        school_subject = body.school_subject
+        subject = body.subject
+        difficultie = body.difficultie
         query = f"Quero que você gere questões de {school_subject}, sendo do assunto: {subject} e sendo da dificuldade: {difficultie}."
     res = generate_questions_service.handle(f"""{query}""")
     return res
 
+
 app.mount("/", StaticFiles(directory="static", html=True), name="static")
 
 if __name__ == "__main__":
     import uvicorn
+
     uvicorn.run("app:app", host="0.0.0.0", port=8000)

web/src/App.jsx

@@ -46,20 +46,23 @@ function App() {
     e.preventDefault();
     setIsLoading(true);
     try {
+
+      const body = promptMode ? { promptValue } : { subject, difficultie };
+
       const res = await fetch("/generate_questions", {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({
-          subject, difficultie
-        })
+        body: JSON.stringify(body)
       });
+
       console.log(res)
       if (res.ok) {
         const data = await res.json();
         console.log(data)
-        setQuestions(data.questions);
+        setQuestions(data.rag_result.questions);
+        setPromptValue('');
       } else {
         toast.error("Erro ao gerar questões", {
           position: "top-right",
@@ -112,95 +115,99 @@ function App() {
       </header>
       <main className="flex-1 flex overflow-hidden">
         {menuState &&
-          <>
-            <div className="p-10 flex flex-col gap-5">
-              <div className="flex items-center space-x-2 w-56">
-                <Switch id="prompt-mode" checked={promptMode} onCheckedChange={setPromptMode} />
-                <Label htmlFor="prompt-mode">Prompt Mode</Label>
-              </div>
-              {!promptMode && (
-                <form
-                  onSubmit={handleSubmit}
-                  className="flex flex-col gap-2.5 absolute top-0 bg-black/95 h-full md:h-fit z-10 md:static md:bg-transparent">
-                  <div className="md:sr-only">
-                    <ChevronLeft className="w-10 h-10" onClick={e => setMenuState(prev => !prev)} />
-                  </div>
-                  <fieldset>
-                    <h2>Selecione uma matéria:</h2>
-                    <Select defaultValue="biologia">
-                      <SelectTrigger className="w-[180px]">
-                        <SelectValue placeholder="Matéria" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="biologia">Biologia</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <h2>Selecione um conteúdo:</h2>
-                    <Select onValueChange={value => setSubject(value)}>
-                      <SelectTrigger className="w-[180px]">
-                        <SelectValue placeholder="Conteúdo" />
-                      </SelectTrigger>
-                      <SelectContent onChange={e => console.log(e)}>
-                        {subjects && subjects.map(({ label, value }) => (
-                          <SelectItem key={value} value={value}>{label}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <h2>Selecione uma dificuldade:</h2>
-                    <Select onValueChange={value => setDifficultie(value)}>
-                      <SelectTrigger className="w-[180px]">
-                        <SelectValue placeholder="Dificuldade" />
-                      </SelectTrigger>
-                      <SelectContent onChange={e => console.log(e)}>
-                        {difficulties && difficulties.map(({ label, value }) => (
-                          <SelectItem key={value} value={value}>{label}</SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </fieldset>
-                  <button className="h-10 bg-purple-500 rounded px-2.5 py-1 mt-5 hover:brightness-110 transition-all flex items-center justify-center disabled:hover:brightness-75 disabled:brightness-75"
-                    disabled={isLoading || !subject || !difficultie}>
-                    {isLoading ?
-                      <div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full"></div>
-                      :
-                      "Enviar"
-                    }
-                  </button>
-                </form>
-              )}
-
-
+          <div className="min-w-72 p-10 flex flex-col gap-5 absolute h-full top-0 bg-black/95 md:h-fit z-10 md:static md:bg-transparent">
+            <div className="md:sr-only">
+              <ChevronLeft className="w-10 h-10" onClick={e => setMenuState(prev => !prev)} />
+            </div>
+            <div className="flex items-center space-x-2">
+              <Switch id="prompt-mode" checked={promptMode} onCheckedChange={setPromptMode} />
+              <Label htmlFor="prompt-mode">Prompt Mode</Label>
             </div>
-            <section className="p-10 flex-1 md:border-l-2 md:border-l-white flex flex-col gap-2.5 ">
-              {promptMode ? (
-                <>
-                  <h2 className="text-2xl font-bold mb-5">Digite seu prompt para gerarmos as questões!</h2>
-                  <Input placeholder="Digite seu prompt:" value={promptValue} onChange={(e) => setPromptValue(e.target.value)}/>
-                </>
-              ) : (
-                <>
-                  <h2 className="text-2xl font-bold">Questões</h2>
-                  <div className="w-full h-full flex flex-col gap-5 rounded p-2.5 overflow-y-scroll">
-                    {questions ?
-                      questions.map(({ question, options, answer }, index) => (
-                        <div key={index} className="bg-slate-950 ring-2 ring-white p-2.5 rounded">
-                          {question}<br /><br />
-                          {options.map((option, i) => (
-                            <div key={i}>
-                              {option}
-                            </div>
-                          ))}<br />
-                          Resposta correta: {answer}
-                        </div>
-                      ))
-                      : <div className="p-2.5 bg-slate-950 ring-2 ring-white rounded">Escolha os filtros para criar as questões</div>
-                    }
-                  </div>
-                </>
-              )}
-            </section>
-          </>
+            {!promptMode && (
+              <form
+                onSubmit={handleSubmit}
+                className="flex flex-col gap-2.5 top-0 h-full ">
+                <fieldset>
+                  <h2>Selecione uma matéria:</h2>
+                  <Select defaultValue="biologia">
+                    <SelectTrigger className="w-[180px]">
+                      <SelectValue placeholder="Matéria" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="biologia">Biologia</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <h2>Selecione um conteúdo:</h2>
+                  <Select onValueChange={value => setSubject(value)}>
+                    <SelectTrigger className="w-[180px]">
+                      <SelectValue placeholder="Conteúdo" />
+                    </SelectTrigger>
+                    <SelectContent onChange={e => console.log(e)}>
+                      {subjects && subjects.map(({ label, value }) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <h2>Selecione uma dificuldade:</h2>
+                  <Select onValueChange={value => setDifficultie(value)}>
+                    <SelectTrigger className="w-[180px]">
+                      <SelectValue placeholder="Dificuldade" />
+                    </SelectTrigger>
+                    <SelectContent onChange={e => console.log(e)}>
+                      {difficulties && difficulties.map(({ label, value }) => (
+                        <SelectItem key={value} value={value}>{label}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </fieldset>
+                <button className="h-10 bg-purple-500 rounded px-2.5 py-1 mt-5 hover:brightness-110 transition-all flex items-center justify-center disabled:hover:brightness-75 disabled:brightness-75"
+                  disabled={isLoading || !subject || !difficultie}>
+                  {isLoading ?
+                    <div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full"></div>
+                    :
+                    "Enviar"
+                  }
+                </button>
+              </form>
+            )}
+          </div>
         }
+        <section className="p-10 flex-1 md:border-l-2 md:border-l-white flex flex-col gap-2.5 ">
+          {promptMode &&
+            <form
+              onSubmit={handleSubmit}>
+              <h2 className="text-2xl font-bold mb-5">Digite seu prompt para gerarmos as questões!</h2>
+              <Input placeholder="Digite seu prompt:" value={promptValue} onChange={(e) => setPromptValue(e.target.value)} />
+              <button className="h-10 w-full bg-purple-500 rounded px-2.5 py-1 mt-5 hover:brightness-110 transition-all flex items-center justify-center disabled:hover:brightness-75 disabled:brightness-75"
+                disabled={isLoading || !promptValue}>
+                {isLoading ?
+                  <div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full"></div>
+                  :
+                  "Enviar"
+                }
+              </button>
+            </form>
+          }
+          <h2 className="text-2xl font-bold">Questões</h2>
+          <div className="w-full h-full flex flex-col gap-5 rounded p-2.5 overflow-y-scroll">
+            {questions ?
+              questions.map(({ question, options, answer }, index) => (
+                <div key={index} className="bg-slate-950 ring-2 ring-white p-2.5 rounded">
+                  {question}<br /><br />
+                  {options.map((option, i) => (
+                    <div key={i}>
+                      {option}
+                    </div>
+                  ))}<br />
+                  Resposta correta: {answer}
+                </div>
+              ))
+              : 
+              
+              !promptMode && <div className="p-2.5 bg-slate-950 ring-2 ring-white rounded">Escolha os filtros para criar as questões</div>
+            }
+          </div>
+        </section>
         <ToastContainer />
       </main>