Merge pull request #703 from muhammedsaidckr/file-upload

Enhance File Upload Component with Improved UI and Delete Functionality

backend/server.py

@@ -77,6 +77,7 @@ async def websocket_endpoint(websocket: WebSocket):
                 json_data = json.loads(data[6:])
                 task = json_data.get("task")
                 report_type = json_data.get("report_type")
+                source_urls = json_data.get("source_urls")
                 tone = json_data.get("tone")
                 headers = json_data.get("headers", {})
                 filename = f"task_{int(time.time())}_{task}"
@@ -86,7 +87,7 @@ async def websocket_endpoint(websocket: WebSocket):
                 report_source = json_data.get("report_source")
                 if task and report_type:
                     report = await manager.start_streaming(
-                        task, report_type, report_source, tone, websocket, headers
+                        task, report_type, report_source, source_urls, tone, websocket, headers
                     )
                     # Ensure report is a string
                     if not isinstance(report, str):

backend/websocket_manager.py

@@ -54,14 +54,14 @@ async def disconnect(self, websocket: WebSocket):
             del self.message_queues[websocket]
 
 
-    async def start_streaming(self, task, report_type, report_source, tone, websocket, headers=None):
+    async def start_streaming(self, task, report_type, report_source, source_urls, tone, websocket, headers=None):
         """Start streaming the output."""
         tone = Tone[tone]
-        report = await run_agent(task, report_type, report_source, tone, websocket, headers)
+        report = await run_agent(task, report_type, report_source, source_urls, tone, websocket, headers)
         return report
 
 
-async def run_agent(task, report_type, report_source, tone: Tone, websocket, headers=None):
+async def run_agent(task, report_type, report_source, source_urls, tone: Tone, websocket, headers=None):
     """Run the agent."""
     # measure time
     start_time = datetime.datetime.now()
@@ -76,7 +76,7 @@ async def run_agent(task, report_type, report_source, tone: Tone, websocket, hea
             query=task,
             report_type=report_type,
             report_source=report_source,
-            source_urls=None,
+            source_urls=source_urls,
             tone=tone,
             config_path=config_path,
             websocket=websocket,
@@ -88,14 +88,14 @@ async def run_agent(task, report_type, report_source, tone: Tone, websocket, hea
             query=task,
             report_type=report_type,
             report_source=report_source,
-            source_urls=None,
+            source_urls=source_urls,
             tone=tone,
             config_path=config_path,
             websocket=websocket,
             headers=headers
         )
         report = await researcher.run()
-        
+
     # measure time
     end_time = datetime.datetime.now()
     await websocket.send_json(

frontend/index.html

@@ -179,7 +179,19 @@ <h2>Research Report</h2>
             autoAgentDiv.style.display = 'flex';
             agentChoices[0].style.display = 'none';
         });
-    </script>
+
+        const tagsInput = document.getElementById('tags-input');
+        const input = document.getElementById('custom_source');
+
+        input.addEventListener('keypress', function (e) {
+            if ((e.key === 'Enter' || e.key === ",") && input.value !== '') {
+                e.preventDefault();
+                GPTResearcher.addTag(input.value);
+                input.value = '';
+            }
+        });
+
+</script>
 </body>
 
 </html>

frontend/scripts.js

@@ -9,6 +9,15 @@ const GPTResearcher = (() => {
     updateState('initial')
   }
 
+  const changeSource = () => {
+    const report_source = document.querySelector('select[name="report_source"]').value
+    if (report_source === 'sources') {
+        document.getElementById('sources').style.display = 'block'
+    } else {
+        document.getElementById('sources').style.display = 'none'
+    }
+  }
+
   const startResearch = () => {
     document.getElementById('output').innerHTML = ''
     document.getElementById('reportContainer').innerHTML = ''
@@ -51,11 +60,17 @@ const GPTResearcher = (() => {
       ).value
       const tone = document.querySelector('select[name="tone"]').value
       const agent = document.querySelector('input[name="agent"]:checked').value
+      let source_urls = tags
+
+      if (report_source !== 'sources' && source_urls.length > 0) {
+        source_urls = source_urls.slice(0, source_urls.length - 1)
+      }
 
       const requestData = {
         task: task,
         report_type: report_type,
         report_source: report_source,
+        source_urls: source_urls,
         tone: tone,
         agent: agent,
       }
@@ -159,9 +174,36 @@ const GPTResearcher = (() => {
     }
   }
 
+  const tagsInput = document.getElementById('tags-input');
+  const input = document.getElementById('custom_source');
+
+  const tags = [];
+
+  const addTag = (url) => {
+    if (tags.includes(url)) return;
+    tags.push(url);
+
+    const tagElement = document.createElement('span');
+    tagElement.className = 'tag';
+    tagElement.textContent = url;
+
+    const removeButton = document.createElement('span');
+    removeButton.className = 'remove-tag';
+    removeButton.textContent = 'x';
+    removeButton.onclick = function () {
+        tagsInput.removeChild(tagElement);
+        tags.splice(tags.indexOf(url), 1);
+    };
+
+    tagElement.appendChild(removeButton);
+    tagsInput.insertBefore(tagElement, input);
+  }
+
   document.addEventListener('DOMContentLoaded', init)
   return {
     startResearch,
     copyToClipboard,
+    changeSource,
+      addTag,
   }
 })()

frontend/styles.css

@@ -1,7 +1,13 @@
 @keyframes gradientBG {
-    0% {background-position: 0% 50%;}
-    50% {background-position: 100% 50%;}
-    100% {background-position: 0% 50%;}
+    0% {
+        background-position: 0 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
 }
 
 html {
@@ -35,27 +41,25 @@ body {
     font-size: 1.5rem;
     font-weight: 400;
     max-width: 500px;
-    margin: auto;
-    margin-bottom: 2rem;
+    margin: auto auto 2rem auto;
 }
 
 .container {
-    margin: auto;
     padding: 20px;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
-    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     transition: all .3s ease-in-out;
-    margin-bottom: 180px;
+    margin: auto auto 180px auto;
 }
 
 .container:hover {
     transform: scale(1.01);
-    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
 }
 
 input, select, #output, #reportContainer {
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     border: none;
     color: #fff;
     transition: all .3s ease-in-out;
@@ -64,7 +68,7 @@ input, select, #output, #reportContainer {
 input:hover, input:focus, select:hover, select:focus {
     background-color: #dfe4ea;
     border: 1px solid rgba(255, 255, 255, 0.5);
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
 }
 
@@ -83,7 +87,7 @@ input:hover, input:focus, select:hover, select:focus {
 .btn:hover {
     opacity: 0.8;
     transform: scale(1.1);
-    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 
 .agent_question {
@@ -118,7 +122,7 @@ footer {
 
 #output {
     height: 300px;
-    font-family: 'Times New Roman', Times, , "Courier New", serif;
+    font-family: 'Times New Roman', Times, "Courier New", serif;
     overflow: auto;
     padding: 10px;
     margin-bottom: 10px;
@@ -127,10 +131,40 @@ footer {
 }
 
 #reportContainer {
-    background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255, 255, 255, 0.1);
     border: none;
     color: #fff;
     transition: all .3s ease-in-out;
     padding: 25px;
     border-radius: 12px;
 }
+
+.tags-input {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    border: 1px solid #ccc;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.tag {
+    background-color: #007bff;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+}
+
+.tag .remove-tag {
+    margin-left: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.tag-input {
+    border: none;
+    outline: none;
+    flex-grow: 1;
+}

gpt_researcher/master/agent.py

@@ -94,7 +94,8 @@ async def conduct_research(self):
         """
         # Reset visited_urls and source_urls at the start of each research task
         self.visited_urls.clear()
-        self.source_urls = []
+        if self.report_source != ReportSource.Sources.value:
+            self.source_urls = []
 
         if self.verbose:
             await stream_output(

gpt_researcher/utils/enum.py

@@ -14,6 +14,7 @@ class ReportSource(Enum):
     Web = "web"
     Local = "local"
     LangChainDocuments = "langchain_documents"
+    Sources = "sources"
 
 
 class Tone(Enum):

multi_agents/frontend/components/Search.tsx

@@ -46,7 +46,7 @@ const Search = () => {
     setReportType(reportType);
     setReportSource(reportSource);
     // Send data to WebSocket server if needed
-    let data = "start " + JSON.stringify({ task: task.value, report_type: report_type.value, report_source: report_source.value });
+    let data = "start " + JSON.stringify({ task: task.value, report_type: reportType.value, report_source: reportSource.value });
     socket.send(data);
   };
 

multi_agents/frontend/components/Settings/FileUpload.js

@@ -50,20 +50,30 @@ const FileUpload = () => {
   const { getRootProps, getInputProps } = useDropzone({ onDrop });
 
   return (
-    <div>
+    <div className={"mb-4 w-full"}>
       <div {...getRootProps()} style={{ border: '2px dashed #cccccc', padding: '20px', textAlign: 'center' }}>
         <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
+        <p>Drag &apos;n&apos; drop some files here, or click to select files</p>
       </div>
-      <h2>Uploaded Files</h2>
-      <ul>
-        {files.map(file => (
-          <li key={file}>
-            {file} 
-            <button onClick={() => deleteFile(file)}>Delete</button>
-          </li>
-        ))}
-      </ul>
+      {files.length > 0 && (
+          <>
+            <h2 className={"text-gray-900 mt-2 text-xl"}>Uploaded Files</h2>
+            <ul role={"list"} className={"my-2 divide-y divide-gray-100"}>
+              {files.map(file => (
+                <li key={file} className={"flex justify-between gap-x-6 py-1"}>
+                  <span className={"flex-1"}>{file}</span>
+                  <button onClick={(e) => { e.preventDefault(); deleteFile(file) }}>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                         stroke="currentColor" className="size-6">
+                      <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
     </div>
   );
 };