From 51215e7a3177a6eb0dddbde8f0113f2cdc594a98 Mon Sep 17 00:00:00 2001 From: Guanming Wang <84255909+william-Dic@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:52:10 +0100 Subject: [PATCH 1/3] Create first-principle.mdx --- docs/showcase/first-principle.mdx | 80 +++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 docs/showcase/first-principle.mdx diff --git a/docs/showcase/first-principle.mdx b/docs/showcase/first-principle.mdx new file mode 100644 index 0000000..4aeb345 --- /dev/null +++ b/docs/showcase/first-principle.mdx @@ -0,0 +1,80 @@ +## title: FirstPrinciples App | AI-Powered Learning Roadmaps description: An AI-powered learning roadmap generator that helps users identify specific learning topics and provides personalized learning plans. sidebar\_position: 1 keywords: [firstprinciples, learning, roadmap, education, AI, personalized, Flask, React, OpenAI, Perplexity] + +**FirstPrinciples App** is an AI-powered tool that transforms your broad learning goals into structured, personalized roadmaps. Through an interactive chat, the AI engages you in a conversation, asking targeted questions to refine your learning needs before generating a detailed plan. The application is built to help you learn more efficiently by providing a clear path forward. + +https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87 + +## Features + + * **Interactive Chat Interface**: A simple, conversational interface for defining your learning goals. + * **AI-Powered Topic Narrowing**: The AI asks smart, targeted questions to help you specify what you want to learn. + * **Session Management**: Each conversation is a managed session, allowing you to have multiple roadmap discussions. + * **Visual Progress Indicator**: See a visual cue when the AI has gathered enough information to generate your roadmap. + +## Setup + +### Getting Started + +To get the project files, first clone the repository: + +``` +git clone https://github.com/william-Dic/First-Principle.git +cd First-Principle +``` + +----- + +### Backend Setup + +1. Navigate to the Flask server directory: + ``` + cd flask-server + ``` +2. Install dependencies: + ``` + pip install -r requirements.txt + ``` +3. Create a `.env` file in the `flask-server` directory with your API keys: + ``` + OPENAI_API_KEY = Your_openai_apikey + PPLX_API_KEY = Your_perplexity_apikey + PERPLEXITY_API_KEY = Your_perplexity_apikey + ``` +4. Run the Flask server: + ``` + python server.py + ``` + The server will run on http://localhost:5000. + +----- + +### Frontend Setup + +1. Navigate to the client directory: + ``` + cd client + ``` +2. Install dependencies: + ``` + npm install + ``` +3. Run the React development server: + ``` + npm start + ``` + The client will run on http://localhost:3000. + +## Usage + +1. Open your browser and go to `http://localhost:3000`. +2. Use the chat interface to describe what you want to learn. +3. Answer the AI's follow-up questions to help it narrow down your specific needs. +4. Once the AI has sufficient information, it will generate your personalized learning roadmap. + +----- + +## Tech Stack + + * **Frontend**: React + * **Backend**: Flask, Python + * **AI Engine**: OpenAI API, Perplexity API From 204bffa180666a54c87d68c8a8640d509a40a139 Mon Sep 17 00:00:00 2001 From: Guanming Wang <84255909+william-Dic@users.noreply.github.com> Date: Tue, 5 Aug 2025 17:54:03 +0100 Subject: [PATCH 2/3] Update first-principle.mdx --- docs/showcase/first-principle.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/showcase/first-principle.mdx b/docs/showcase/first-principle.mdx index 4aeb345..30cc346 100644 --- a/docs/showcase/first-principle.mdx +++ b/docs/showcase/first-principle.mdx @@ -1,4 +1,9 @@ -## title: FirstPrinciples App | AI-Powered Learning Roadmaps description: An AI-powered learning roadmap generator that helps users identify specific learning topics and provides personalized learning plans. sidebar\_position: 1 keywords: [firstprinciples, learning, roadmap, education, AI, personalized, Flask, React, OpenAI, Perplexity] +--- +title: FirstPrinciples App | AI-Powered Learning Roadmaps +description: An AI-powered learning roadmap generator that helps users identify specific learning topics and provides personalized learning plans. +sidebar_position: 1 +keywords: [firstprinciples, learning, roadmap, education, AI, personalized, Flask, React, OpenAI, Perplexity] +--- **FirstPrinciples App** is an AI-powered tool that transforms your broad learning goals into structured, personalized roadmaps. Through an interactive chat, the AI engages you in a conversation, asking targeted questions to refine your learning needs before generating a detailed plan. The application is built to help you learn more efficiently by providing a clear path forward. From 79975b7c306ea4689a9013e11395f9eb35acd128 Mon Sep 17 00:00:00 2001 From: Kesku Date: Sat, 16 Aug 2025 18:10:30 +0100 Subject: [PATCH 3/3] Unify FirstPrinciples showcase page structure to match standard format --- docs/showcase/first-principle.mdx | 136 ++++++++++++++++-------------- 1 file changed, 71 insertions(+), 65 deletions(-) diff --git a/docs/showcase/first-principle.mdx b/docs/showcase/first-principle.mdx index 30cc346..f0f7a33 100644 --- a/docs/showcase/first-principle.mdx +++ b/docs/showcase/first-principle.mdx @@ -1,85 +1,91 @@ --- -title: FirstPrinciples App | AI-Powered Learning Roadmaps -description: An AI-powered learning roadmap generator that helps users identify specific learning topics and provides personalized learning plans. -sidebar_position: 1 -keywords: [firstprinciples, learning, roadmap, education, AI, personalized, Flask, React, OpenAI, Perplexity] +title: FirstPrinciples | AI Learning Roadmap Generator +description: An AI-powered learning roadmap generator that uses conversational AI to help users identify specific learning topics and provides personalized step-by-step learning plans +sidebar_position: 12 +keywords: [firstprinciples, learning, roadmap, education, AI, personalized, flask, react, openai, perplexity] --- **FirstPrinciples App** is an AI-powered tool that transforms your broad learning goals into structured, personalized roadmaps. Through an interactive chat, the AI engages you in a conversation, asking targeted questions to refine your learning needs before generating a detailed plan. The application is built to help you learn more efficiently by providing a clear path forward. -https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87 + ## Features - * **Interactive Chat Interface**: A simple, conversational interface for defining your learning goals. - * **AI-Powered Topic Narrowing**: The AI asks smart, targeted questions to help you specify what you want to learn. - * **Session Management**: Each conversation is a managed session, allowing you to have multiple roadmap discussions. - * **Visual Progress Indicator**: See a visual cue when the AI has gathered enough information to generate your roadmap. +* **Interactive Chat Interface** for defining and refining learning goals through conversation +* **AI-Powered Topic Narrowing** with smart, targeted questions to specify learning objectives +* **Session Management** allowing multiple roadmap discussions and progress tracking +* **Visual Progress Indicators** showing when sufficient information has been gathered +* **Personalized Learning Plans** with structured, step-by-step roadmaps +* **Conversational AI Flow** combining OpenAI and Perplexity APIs for intelligent interactions -## Setup +## Prerequisites -### Getting Started +* Python 3.8+ and pip +* Node.js 16+ and npm +* OpenAI API key +* Perplexity API key -To get the project files, first clone the repository: +## Installation -``` +```bash +# Clone the repository git clone https://github.com/william-Dic/First-Principle.git cd First-Principle -``` ------ - -### Backend Setup - -1. Navigate to the Flask server directory: - ``` - cd flask-server - ``` -2. Install dependencies: - ``` - pip install -r requirements.txt - ``` -3. Create a `.env` file in the `flask-server` directory with your API keys: - ``` - OPENAI_API_KEY = Your_openai_apikey - PPLX_API_KEY = Your_perplexity_apikey - PERPLEXITY_API_KEY = Your_perplexity_apikey - ``` -4. Run the Flask server: - ``` - python server.py - ``` - The server will run on http://localhost:5000. - ------ - -### Frontend Setup - -1. Navigate to the client directory: - ``` - cd client - ``` -2. Install dependencies: - ``` - npm install - ``` -3. Run the React development server: - ``` - npm start - ``` - The client will run on http://localhost:3000. +# Backend setup +cd flask-server +pip install -r requirements.txt -## Usage +# Frontend setup +cd ../client +npm install +``` -1. Open your browser and go to `http://localhost:3000`. -2. Use the chat interface to describe what you want to learn. -3. Answer the AI's follow-up questions to help it narrow down your specific needs. -4. Once the AI has sufficient information, it will generate your personalized learning roadmap. +## Configuration ------ +Create `.env` file in the `flask-server` directory: +```ini +OPENAI_API_KEY=your_openai_api_key +PPLX_API_KEY=your_perplexity_api_key +PERPLEXITY_API_KEY=your_perplexity_api_key +``` -## Tech Stack +## Usage - * **Frontend**: React - * **Backend**: Flask, Python - * **AI Engine**: OpenAI API, Perplexity API +1. **Start Backend**: + ```bash + cd flask-server + python server.py + ``` + Server runs on http://localhost:5000 + +2. **Start Frontend**: + ```bash + cd client + npm start + ``` + Client runs on http://localhost:3000 + +3. **Generate Roadmap**: + - Open http://localhost:3000 in your browser + - Describe what you want to learn in the chat interface + - Answer AI follow-up questions to refine your learning goals + - Receive a personalized, structured learning roadmap + +## Code Explanation + +* **Frontend**: React application with conversational chat interface and progress indicators +* **Backend**: Flask server managing API calls, session state, and conversation flow +* **AI Integration**: Combines OpenAI API for conversational flow and Perplexity API for intelligent topic analysis +* **Session Management**: Tracks conversation state and learning goal refinement +* **Roadmap Generation**: Creates structured, actionable learning plans based on user input +* **Conversational Flow**: Implements goal-oriented dialogue to narrow down learning objectives + +## Links + +- [GitHub Repository](https://github.com/william-Dic/First-Principle.git) +- [Demo Video](https://github.com/user-attachments/assets/6016c5dd-6c18-415e-b982-fafb56170b87)