Setup
- frontend
npm create vite@latest dynamocards
#select React > JavaScript
cd dynamocards
npm install
#testing vite
npm run dev- backend
- Create a Virtual environment
- download requirements
- unicorn main:app —reload
Backend
In backend/main.py:
- @app.post(“/analyze_video”) def analyze_video(request: VideoAnalysisRequest):
- Call YoutubeProcessor class from
genai.pyInbackend, makegenai.pyand__init__.py - In genai.py
- YoutubeProcessor class
retrieve_youtube_documentsfunctionYoutubeLoader.from_youtube_urlreceives a youtube link (we use pydantic to check the format) and gets its transcripts (subtitles).- We use
RecursiveCharacterTextSplitterto split the received input into chunks.
-
find_key_conceptsfunction
- GeminiProcessor class
generate_documents_summaryfunction:Summarize documents using LangChain’s load_summarize_chaincount_total_tokensfunctionget_modelfunction
- YoutubeProcessor class
Using middleware
In backend/main.py:
- Use FastAPI’s middleware:
CORSMiddleware→ Processes the requests and responses as they pass through the application. Configures your backend to accept requests from different origins, like your frontend- frontend (npm run dev) goes to
http://localhost:5173/ - backend (unicorn main:app —reload) goes to
http://127.0.0.1:8000Infrontend/App.jsx
- frontend (npm run dev) goes to
- empty the file
- install axios
- axios →The frontend uses
axiosto send a POST request with this YouTube link to the backend API endpoint (e.g.,/analyze_video).
- axios →The frontend uses
- Create a frontend
- App() using state hooks
- handles user input link
- returns the metadata for the link from the backend