-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Andreia Ocănoaia <[email protected]>
- Loading branch information
1 parent
d44558e
commit a59a4df
Showing
2 changed files
with
165 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,81 @@ | ||
| import { useState } from "react"; | ||
| import reactLogo from "./assets/react.svg"; | ||
| import { BackendService } from "@genezio-sdk/rag-workshop"; | ||
| import { BackendService, UserDescription, Recommendation } from "@genezio-sdk/rag-workshop"; | ||
| import "./App.css"; | ||
|
|
||
| export default function App() { | ||
| const [name, setName] = useState(""); | ||
| const [response, setResponse] = useState(""); | ||
| const [description, setDescription] = useState(""); | ||
| const [response, setResponse] = useState<Recommendation[]>(); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| async function sayHello() { | ||
| setResponse(await BackendService.hello(name)); | ||
| async function askLlm(e: { preventDefault: () => void; }) { | ||
| e.preventDefault(); | ||
| setLoading(true); | ||
| const defaultName = "John Doe"; | ||
| const defaultDescription = "I am a full-stack developer passionate about open-source projects and generative AI."; | ||
| const user: UserDescription = { | ||
| name: name || defaultName, | ||
| description: description || defaultDescription, | ||
| }; | ||
| console.log(user); | ||
| setResponse(await BackendService.ask(user)); | ||
| console.log(response); | ||
| setLoading(false); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <a href="https://genezio.com" target="_blank"> | ||
| <img | ||
| src="https://raw.githubusercontent.com/Genez-io/graphics/main/svg/Logo_Genezio_White.svg" | ||
| className="logo genezio light" | ||
| alt="Genezio Logo" | ||
| /> | ||
| <img | ||
| src="https://raw.githubusercontent.com/Genez-io/graphics/main/svg/Logo_Genezio_Black.svg" | ||
| className="logo genezio dark" | ||
| alt="Genezio Logo" | ||
| /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h1>Genezio + React = ❤️</h1> | ||
| <div className="card"> | ||
| <input | ||
| type="text" | ||
| className="input-box" | ||
| onChange={(e) => setName(e.target.value)} | ||
| placeholder="Enter your name" | ||
| /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <button onClick={() => sayHello()}>Say Hello</button> | ||
| <p className="read-the-docs">{response}</p> | ||
| <div className="container"> | ||
| <h1>Personalized Speaker Recommendations</h1> | ||
| <p className="subtitle"> | ||
| Complete the form below to get a list of speakers and talks from the <a href="https://c3fest.com" target="_blank" rel="noopener noreferrer">C3 Festival</a> tailored just for you: | ||
| </p> | ||
| <div className="card"> | ||
| <form onSubmit={askLlm}> | ||
| <label htmlFor="name">Enter your name below:</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| className="input-box" | ||
| onChange={(e) => setName(e.target.value)} | ||
| placeholder="John Doe" | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| <label htmlFor="description">Enter your tech interest below:</label> | ||
| <input | ||
| type="text" | ||
| id="description" | ||
| className="input-box" | ||
| onChange={(e) => setDescription(e.target.value)} | ||
| placeholder="I am a full-stack developer passionate about open-source projects and generative AI." | ||
| /> | ||
| <br /> | ||
| <br /> | ||
| <button type="submit" className="submit-button">Send</button> | ||
| </form> | ||
| {/* load a spinner */} | ||
| {loading ? ( | ||
| <div className="spinner"></div> | ||
| ) : ( | ||
| response && response.length > 0 && ( | ||
| <div className="response-list"> | ||
| {response.map((item, index) => ( | ||
| <div key={index} className="response-item"> | ||
| <h3>{item.speaker}</h3> | ||
| <p>{item.reason}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| )} | ||
| </div> | ||
| </div> | ||
| <footer className="footer"> | ||
| <a href="https://genezio.com" target="_blank" rel="noopener noreferrer" className="footer-link"> | ||
| <p>Built with Genezio with ❤️</p> | ||
| </a> | ||
| </footer> | ||
| </> | ||
| ); | ||
| } |