Merge pull request #800 from ElishaKay/next-to-root

✅ ready for merge: nextjs to root

.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY=
+TAVILY_API_KEY=

README.md

@@ -193,6 +193,21 @@ An average run generates a 5-6 page research report in multiple formats such as
 
 Check it out [here](https://github.com/assafelovic/gpt-researcher/tree/master/multi_agents) or head over to our [documentation](https://docs.gptr.dev/docs/gpt-researcher/langgraph) for more information.
 
+## 🖥️ Frontend Applications
+
+GPT-Researcher now features an enhanced frontend to improve the user experience and streamline the research process. The frontend offers:
+
+- An intuitive interface for inputting research queries
+- Real-time progress tracking of research tasks
+- Interactive display of research findings
+- Customizable settings for tailored research experiences
+
+Two deployment options are available:
+1. A lightweight static frontend served by FastAPI
+2. A feature-rich NextJS application for advanced functionality
+
+For detailed setup instructions and more information about the frontend features, please visit our [documentation page](https://docs.gptr.dev/docs/gpt-researcher/frontend).
+
 ## 🚀 Contributing
 We highly welcome contributions! Please check out [contributing](https://github.com/assafelovic/gpt-researcher/blob/master/CONTRIBUTING.md) if you're interested.
 

docker-compose.yml

@@ -19,10 +19,10 @@ services:
       - CHOKIDAR_USEPOLLING=true
     build:
       dockerfile: Dockerfile.dev
-      context: multi_agents/frontend
+      context: frontend/nextjs
     volumes:
       - /app/node_modules
-      - ./multi_agents/frontend:/app
+      - ./frontend/nextjs:/app
     restart: always
     ports:
       - 3000:3000

docs/docs/gpt-researcher/frontend.md

@@ -0,0 +1,86 @@
+# Frontend Application
+
+This frontend project aims to enhance the user experience of GPT-Researcher, providing an intuitive and efficient interface for automated research. It offers two deployment options to suit different needs and environments.
+
+## Option 1: Static Frontend (FastAPI)
+
+A lightweight solution using FastAPI to serve static files.
+
+#### Prerequisites
+- Python 3.11+
+- pip
+
+#### Setup and Running
+
+1. Install required packages:
+   ```
+   pip install -r requirements.txt
+   ```
+
+2. Start the server:
+   ```
+   python -m uvicorn main:app
+   ```
+
+3. Access at `http://localhost:8000`
+
+#### Demo
+<iframe height="400" width="700" src="https://github.com/assafelovic/gpt-researcher/assets/13554167/dd6cf08f-b31e-40c6-9907-1915f52a7110" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
+
+## Option 2: NextJS Frontend
+
+A more robust solution with enhanced features and performance.
+
+#### Prerequisites
+- Node.js (v18.17.0 recommended)
+- npm
+
+#### Setup and Running
+
+1. Navigate to NextJS directory:
+   ```
+   cd nextjs
+   ```
+
+2. Set up Node.js:
+   ```
+   nvm install 18.17.0
+   nvm use v18.17.0
+   ```
+
+3. Install dependencies:
+   ```
+   npm install --legacy-peer-deps
+   ```
+
+4. Start development server:
+   ```
+   npm run dev
+   ```
+
+5. Access at `http://localhost:3000`
+
+Note: Requires backend server on `localhost:8000` as detailed in option 1.
+
+#### Demo
+<iframe height="400" width="700" src="https://github.com/user-attachments/assets/092e9e71-7e27-475d-8c4f-9dddd28934a3" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+
+## Choosing an Option
+
+- Static Frontend: Quick setup, lightweight deployment.
+- NextJS Frontend: Feature-rich, scalable, better performance and SEO.
+
+For production, NextJS is recommended.
+
+## Frontend Features
+
+Our frontend enhances GPT-Researcher by providing:
+
+1. Intuitive Research Interface: Streamlined input for research queries.
+2. Real-time Progress Tracking: Visual feedback on ongoing research tasks.
+3. Interactive Results Display: Easy-to-navigate presentation of findings.
+4. Customizable Settings: Adjust research parameters to suit specific needs.
+5. Responsive Design: Optimal experience across various devices.
+
+These features aim to make the research process more efficient and user-friendly, complementing GPT-Researcher's powerful agent capabilities.

docs/sidebars.js

@@ -21,6 +21,7 @@
         'gpt-researcher/introduction',
         'gpt-researcher/getting-started',
         'gpt-researcher/pip-package',
+        'gpt-researcher/frontend',
          'gpt-researcher/example',
         'gpt-researcher/troubleshooting',
       ],
@@ -34,8 +35,8 @@
         'gpt-researcher/config',
         'gpt-researcher/tailored-research',
         'gpt-researcher/retrievers',
-        'gpt-researcher/vector-stores',
         'gpt-researcher/llms',
+        'gpt-researcher/vector-stores',
         ]
     },
     {

frontend/README.md

@@ -0,0 +1,85 @@
+# Frontend Application
+
+This frontend project aims to enhance the user experience of GPT-Researcher, providing an intuitive and efficient interface for automated research. It offers two deployment options to suit different needs and environments.
+
+## Option 1: Static Frontend (FastAPI)
+
+A lightweight solution using FastAPI to serve static files.
+
+#### Prerequisites
+- Python 3.11+
+- pip
+
+#### Setup and Running
+
+1. Install required packages:
+   ```
+   pip install -r requirements.txt
+   ```
+
+2. Start the server:
+   ```
+   python -m uvicorn main:app
+   ```
+
+3. Access at `http://localhost:8000`
+
+#### Demo
+https://github.com/assafelovic/gpt-researcher/assets/13554167/dd6cf08f-b31e-40c6-9907-1915f52a7110
+
+## Option 2: NextJS Frontend
+
+A more robust solution with enhanced features and performance.
+
+#### Prerequisites
+- Node.js (v18.17.0 recommended)
+- npm
+
+#### Setup and Running
+
+1. Navigate to NextJS directory:
+   ```
+   cd nextjs
+   ```
+
+2. Set up Node.js:
+   ```
+   nvm install 18.17.0
+   nvm use v18.17.0
+   ```
+
+3. Install dependencies:
+   ```
+   npm install --legacy-peer-deps
+   ```
+
+4. Start development server:
+   ```
+   npm run dev
+   ```
+
+5. Access at `http://localhost:3000`
+
+Note: Requires backend server on `localhost:8000` as detailed in option 1.
+
+#### Demo
+https://github.com/user-attachments/assets/092e9e71-7e27-475d-8c4f-9dddd28934a3
+
+## Choosing an Option
+
+- Static Frontend: Quick setup, lightweight deployment.
+- NextJS Frontend: Feature-rich, scalable, better performance and SEO.
+
+For production, NextJS is recommended.
+
+## Frontend Features
+
+Our frontend enhances GPT-Researcher by providing:
+
+1. Intuitive Research Interface: Streamlined input for research queries.
+2. Real-time Progress Tracking: Visual feedback on ongoing research tasks.
+3. Interactive Results Display: Easy-to-navigate presentation of findings.
+4. Customizable Settings: Adjust research parameters to suit specific needs.
+5. Responsive Design: Optimal experience across various devices.
+
+These features aim to make the research process more efficient and user-friendly, complementing GPT-Researcher's powerful agent capabilities.

multi_agents/frontend/app/page.tsx → frontend/nextjs/app/page.tsx

@@ -200,8 +200,9 @@ export default function Home() {
     let currentReportGroup = null;
     let finalReportGroup = null;
     let sourceBlockEncountered = false;
+    let lastSubqueriesIndex = -1;
 
-    data.forEach((item) => {
+    data.forEach((item, index) => {
       const { type, content, metadata, output, link } = item;
 
       if (type === 'report') {
@@ -234,10 +235,26 @@ export default function Home() {
             currentSourceGroup = null;
           }
           groupedData.push(item);
+          lastSubqueriesIndex = groupedData.length - 1;
+        } else if (type === 'sourceBlock') {
+          currentSourceGroup = item;
+          if (lastSubqueriesIndex !== -1) {
+            groupedData.splice(lastSubqueriesIndex + 1, 0, currentSourceGroup);
+            lastSubqueriesIndex = -1;
+          } else {
+            groupedData.push(currentSourceGroup);
+          }
+          sourceBlockEncountered = true;
+          currentSourceGroup = null;
         } else if (content === 'added_source_url') {
           if (!currentSourceGroup) {
             currentSourceGroup = { type: 'sourceBlock', items: [] };
-            groupedData.push(currentSourceGroup);
+            if (lastSubqueriesIndex !== -1) {
+              groupedData.splice(lastSubqueriesIndex + 1, 0, currentSourceGroup);
+              lastSubqueriesIndex = -1;
+            } else {
+              groupedData.push(currentSourceGroup);
+            }
             sourceBlockEncountered = true;
           }
           const hostname = new URL(metadata).hostname.replace('www.', '');

multi_agents/frontend/components/Task/Accordion.tsx → frontend/nextjs/components/Task/Accordion.tsx

@@ -103,7 +103,7 @@ const Accordion = ({ logs }) => {
       <h2 id={`accordion-collapse-heading-${index}`}>
         <button
           type="button"
-          className="flex items-center w-full p-5 font-medium rtl:text-right text-white rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 text-white hover:bg-gray-100 dark:hover:bg-gray-800 gap-3"
+          className="flex items-center w-full p-5 font-medium rtl:text-right text-white rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 hover:bg-gray-700 hover:text-white gap-3"
           onClick={() => handleToggle(index)}
           aria-expanded={openIndex === index}
           aria-controls={`accordion-collapse-body-${index}`}