Spaces:

codelion
/

LLMSearchEngine

Running

App Files Files Community

codelion commited on Feb 28, 2025

Commit

da58ae2

verified ·

1 Parent(s): 3bd40c8

Update app.py

Browse files

Files changed (1) hide show

app.py +258 -124

app.py CHANGED Viewed

@@ -17,8 +17,8 @@ client = OpenAI(
 RESULTS_PER_PAGE = 10
 TOTAL_RESULTS = 30  # Generate 30 results to allow pagination
-def fetch_search_results(query, stream=False):
-    """Fetch search results from the LLM, with optional streaming."""
     if not query.strip():
         return None, "Please enter a search query."
@@ -39,25 +39,21 @@ def fetch_search_results(query, stream=False):
                 {"role": "system", "content": "You are a helpful search engine."},
                 {"role": "user", "content": prompt}
             ],
-            response_format={"type": "json_object"},
-            stream=stream  # Enable streaming if requested
         )
-        if stream:
-            return response, None  # Return raw streaming response
         else:
-            content = response.choices[0].message.content
-            results = json.loads(content)
-            # Handle different possible JSON structures
-            if isinstance(results, dict) and "results" in results:
-                results = results["results"]
-            elif isinstance(results, list):
-                pass
-            else:
-                return None, "Error: Unexpected JSON structure."
-            return results, None
     except Exception as e:
         error_msg = str(e)
@@ -68,97 +64,9 @@ def fetch_search_results(query, stream=False):
         else:
             return None, f"Error: {error_msg}"
-def stream_search_results(query, page):
-    """Stream search results incrementally after accumulating the full response."""
-    stream_response, error = fetch_search_results(query, stream=True)
-    if error:
-        yield f"<p style='color: red; text-align: center;'>{error}</p>"
-        return
-    # Step 1: Accumulate the full response
-    buffer = ""
-    for chunk in stream_response:
-        if chunk.choices[0].delta.content:
-            buffer += chunk.choices[0].delta.content
-    # Step 2: Parse the full JSON response
-    try:
-        results = json.loads(buffer)
-        if isinstance(results, dict) and "results" in results:
-            results = results["results"]
-        elif not isinstance(results, list):
-            yield "<p style='color: red; text-align: center;'>Error: Unexpected JSON structure.</p>"
-            return
-    except json.JSONDecodeError:
-        yield "<p style='color: red; text-align: center;'>Error: Failed to parse JSON response.</p>"
-        return
-    # Step 3: Calculate pagination
-    RESULTS_PER_PAGE = 10  # Adjust this as needed
-    start_idx = (page - 1) * RESULTS_PER_PAGE
-    end_idx = min(start_idx + RESULTS_PER_PAGE, len(results))
-    total_pages = (len(results) + RESULTS_PER_PAGE - 1) // RESULTS_PER_PAGE
-    # Step 4: Generate and yield the header
-    header = f"""
-    <html>
-    <head>
-        <title>LLM Search Engine</title>
-        <style>
-            body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; color: #202124; }}
-            .results {{ max-width: 652px; margin: 0 auto; }}
-            .search-result {{ margin-bottom: 28px; }}
-            .search-result a {{ color: #1a0dab; font-size: 20px; text-decoration: none; }}
-            .search-result a:hover {{ text-decoration: underline; }}
-            .search-result .url {{ color: #006621; font-size: 14px; line-height: 20px; }}
-            .search-result p {{ color: #4d5156; font-size: 14px; line-height: 22px; margin: 0; }}
-            .pagination {{ text-align: center; margin: 40px 0; }}
-            .pagination a, .pagination span {{
-                color: #1a0dab; font-size: 14px; margin: 0 8px; text-decoration: none;
-            }}
-            .pagination a:hover {{ text-decoration: underline; }}
-        </style>
-    </head>
-    <body>
-        <div class="results">
-            <h2 style="font-size: 18px; color: #70757a; margin-bottom: 20px;">Results for '{query}' (Page {page} of {total_pages})</h2>
-    """
-    yield header
-    # Step 5: Yield each result for the current page
-    for i in range(start_idx, end_idx):
-        if i < len(results):
-            result = results[i]
-            title = result.get("title", "No title")
-            snippet = result.get("snippet", "No snippet")
-            url = result.get("url", "#")
-            yield f"""
-            <div class="search-result">
-                <a href="{url}" target="_blank">{title}</a>
-                <div class="url">{url}</div>
-                <p>{snippet}</p>
-            </div>
-            """
-    # Step 6: Yield pagination links
-    from urllib.parse import quote
-    encoded_query = quote(query)
-    prev_link = f'<a href="/?query={encoded_query}&page={page-1}&btn=LLM+Search">Previous</a>' if page > 1 else '<span>Previous</span>'
-    next_link = f'<a href="/?query={encoded_query}&page={page+1}&btn=LLM+Search">Next</a>' if page < total_pages else '<span>Next</span>'
-    yield f"""
-        </div>
-        <div class="pagination">
-            {prev_link}
-            <span>Page {page} of {total_pages}</span>
-            {next_link}
-        </div>
-    </body>
-    </html>
-    """
 @app.route('/', methods=['GET'])
 def search_page():
-    """Generate and serve the search results page styled like Google."""
     query = request.args.get('query', '')
     page = request.args.get('page', '1')
     btn = request.args.get('btn', 'LLM Search')
@@ -167,13 +75,14 @@ def search_page():
     except ValueError:
         page = 1
     if not query.strip():
         html_content = """
         <html>
         <head>
             <title>LLM Search Engine</title>
             <style>
-                body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
                 .header { text-align: center; margin-bottom: 20px; }
                 .logo { font-size: 36px; font-weight: bold; }
                 .logo span:nth-child(1) { color: #4285f4; }
@@ -196,7 +105,22 @@ def search_page():
                     border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                 }
                 .search-buttons { text-align: center; }
             </style>
         </head>
         <body>
             <div class="header">
@@ -205,7 +129,7 @@ def search_page():
                 </div>
             </div>
             <div class="search-box">
-                <form method="get" action="/">
                     <input type="text" name="query" placeholder="Search...">
                     <input type="hidden" name="page" value="1">
                     <div class="search-buttons">
@@ -214,27 +138,73 @@ def search_page():
                     </div>
                 </form>
             </div>
         </body>
         </html>
         """
         return render_template_string(html_content)
-    if btn == "I'm Feeling Lucky":
-        results, error = fetch_search_results(query, stream=False)
-        if error:
-            return render_template_string(f"""
-            <html>
-            <head><title>LLM Search Engine</title></head>
-            <body style="font-family: Arial, sans-serif;">
-                <h1>LLM Search Engine</h1>
                 <form method="get" action="/">
                     <input type="text" name="query" value="{html.escape(query)}">
-                    <input type="submit" value="Search">
                 </form>
-                <p style="color: red;">{error}</p>
-            </body>
-            </html>
-            """)
         first_url = results[0].get("url", "#") if results else "#"
         return Response(f"""
         <html>
@@ -247,8 +217,172 @@ def search_page():
         </html>
         """, mimetype="text/html")
-    # Stream results for "LLM Search"
-    return Response(stream_search_results(query, page), mimetype="text/html")
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=int(os.environ.get("PORT", 5000)))

 RESULTS_PER_PAGE = 10
 TOTAL_RESULTS = 30  # Generate 30 results to allow pagination
+def fetch_search_results(query):
+    """Fetch search results from the LLM without streaming."""
     if not query.strip():
         return None, "Please enter a search query."
                 {"role": "system", "content": "You are a helpful search engine."},
                 {"role": "user", "content": prompt}
             ],
+            response_format={"type": "json_object"}
         )
+        content = response.choices[0].message.content
+        results = json.loads(content)
+        # Handle different possible JSON structures
+        if isinstance(results, dict) and "results" in results:
+            results = results["results"]
+        elif isinstance(results, list):
+            pass
         else:
+            return None, "Error: Unexpected JSON structure."
+        return results, None
     except Exception as e:
         error_msg = str(e)
         else:
             return None, f"Error: {error_msg}"
 @app.route('/', methods=['GET'])
 def search_page():
+    """Serve the initial page or process search with progress bar."""
     query = request.args.get('query', '')
     page = request.args.get('page', '1')
     btn = request.args.get('btn', 'LLM Search')
     except ValueError:
         page = 1
+    # Initial page (no query yet)
     if not query.strip():
         html_content = """
         <html>
         <head>
             <title>LLM Search Engine</title>
             <style>
+                body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }
                 .header { text-align: center; margin-bottom: 20px; }
                 .logo { font-size: 36px; font-weight: bold; }
                 .logo span:nth-child(1) { color: #4285f4; }
                     border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                 }
                 .search-buttons { text-align: center; }
+                .progress-container { display: none; max-width: 584px; margin: 20px auto; }
+                .progress-bar {
+                    width: 0%; height: 20px; background-color: #4285f4;
+                    border-radius: 10px; animation: progress 2s infinite;
+                }
+                @keyframes progress {
+                    0% { width: 0%; }
+                    50% { width: 100%; }
+                    100% { width: 0%; }
+                }
             </style>
+            <script>
+                function showProgress() {
+                    document.getElementById('progress').style.display = 'block';
+                }
+            </script>
         </head>
         <body>
             <div class="header">
                 </div>
             </div>
             <div class="search-box">
+                <form method="get" action="/" onsubmit="showProgress()">
                     <input type="text" name="query" placeholder="Search...">
                     <input type="hidden" name="page" value="1">
                     <div class="search-buttons">
                     </div>
                 </form>
             </div>
+            <div class="progress-container" id="progress">
+                <div class="progress-bar"></div>
+            </div>
         </body>
         </html>
         """
         return render_template_string(html_content)
+    # Show progress bar and fetch results
+    results, error = fetch_search_results(query)
+    if error:
+        html_content = f"""
+        <html>
+        <head>
+            <title>LLM Search Engine</title>
+            <style>
+                body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }}
+                .header {{ text-align: center; margin-bottom: 20px; }}
+                .logo {{ font-size: 36px; font-weight: bold; }}
+                .logo span:nth-child(1) {{ color: #4285f4; }}
+                .logo span:nth-child(2) {{ color: #ea4335; }}
+                .logo span:nth-child(3) {{ color: #fbbc05; }}
+                .logo span:nth-child(4) {{ color: #4285f4; }}
+                .logo span:nth-child(5) {{ color: #34a853; }}
+                .search-box {{ max-width: 584px; margin: 0 auto; }}
+                .search-box input[type="text"] {{
+                    width: 100%; padding: 12px 20px; font-size: 16px;
+                    border: 1px solid #dfe1e5; border-radius: 24px;
+                    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
+                }}
+                .search-box input[type="submit"] {{
+                    background-color: #f8f9fa; border: 1px solid #f8f9fa;
+                    border-radius: 4px; color: #3c4043; font-size: 14px;
+                    padding: 10px 16px; margin: 11px 4px; cursor: pointer;
+                }}
+                .search-box input[type="submit"]:hover {{
+                    border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                }}
+                .search-buttons {{ text-align: center; }}
+                .error {{ color: red; text-align: center; }}
+            </style>
+        </head>
+        <body>
+            <div class="header">
+                <div class="logo">
+                    <span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
+                </div>
+            </div>
+            <div class="search-box">
                 <form method="get" action="/">
                     <input type="text" name="query" value="{html.escape(query)}">
+                    <input type="hidden" name="page" value="1">
+                    <div class="search-buttons">
+                        <input type="submit" name="btn" value="LLM Search">
+                        <input type="submit" name="btn" value="I'm Feeling Lucky">
+                    </div>
                 </form>
+            </div>
+            <p class="error">{error}</p>
+        </body>
+        </html>
+        """
+        return render_template_string(html_content)
+    # "I'm Feeling Lucky" redirects to the first URL
+    if btn == "I'm Feeling Lucky":
         first_url = results[0].get("url", "#") if results else "#"
         return Response(f"""
         <html>
         </html>
         """, mimetype="text/html")
+    # Calculate pagination for "LLM Search"
+    start_idx = (page - 1) * RESULTS_PER_PAGE
+    end_idx = min(start_idx + RESULTS_PER_PAGE, len(results))
+    total_pages = (len(results) + RESULTS_PER_PAGE - 1) // RESULTS_PER_PAGE
+    if start_idx >= len(results):
+        html_content = f"""
+        <html>
+        <head>
+            <title>LLM Search Engine</title>
+            <style>
+                body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }}
+                .header {{ text-align: center; margin-bottom: 20px; }}
+                .logo {{ font-size: 36px; font-weight: bold; }}
+                .logo span:nth-child(1) {{ color: #4285f4; }}
+                .logo span:nth-child(2) {{ color: #ea4335; }}
+                .logo span:nth-child(3) {{ color: #fbbc05; }}
+                .logo span:nth-child(4) {{ color: #4285f4; }}
+                .logo span:nth-child(5) {{ color: #34a853; }}
+                .search-box {{ max-width: 584px; margin: 0 auto; }}
+                .search-box input[type="text"] {{
+                    width: 100%; padding: 12px 20px; font-size: 16px;
+                    border: 1px solid #dfe1e5; border-radius: 24px;
+                    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
+                }}
+                .search-box input[type="submit"] {{
+                    background-color: #f8f9fa; border: 1px solid #f8f9fa;
+                    border-radius: 4px; color: #3c4043; font-size: 14px;
+                    padding: 10px 16px; margin: 11px 4px; cursor: pointer;
+                }}
+                .search-box input[type="submit"]:hover {{
+                    border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+                }}
+                .search-buttons {{ text-align: center; }}
+            </style>
+        </head>
+        <body>
+            <div class="header">
+                <div class="logo">
+                    <span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
+                </div>
+            </div>
+            <div class="search-box">
+                <form method="get" action="/">
+                    <input type="text" name="query" value="{html.escape(query)}">
+                    <input type="hidden" name="page" value="1">
+                    <div class="search-buttons">
+                        <input type="submit" name="btn" value="LLM Search">
+                        <input type="submit" name="btn" value="I'm Feeling Lucky">
+                    </div>
+                </form>
+            </div>
+            <p style="text-align: center;">No more results to display.</p>
+        </body>
+        </html>
+        """
+        return render_template_string(html_content)
+    # Generate full results page for "LLM Search"
+    paginated_results = results[start_idx:end_idx]
+    html_content = f"""
+    <html>
+    <head>
+        <title>LLM Search Engine</title>
+        <style>
+            body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; color: #202124; background-color: #fff; }}
+            .header {{ text-align: center; padding: 20px 0; }}
+            .logo {{ font-size: 36px; font-weight: bold; }}
+            .logo span:nth-child(1) {{ color: #4285f4; }}
+            .logo span:nth-child(2) {{ color: #ea4335; }}
+            .logo span:nth-child(3) {{ color: #fbbc05; }}
+            .logo span:nth-child(4) {{ color: #4285f4; }}
+            .logo span:nth-child(5) {{ color: #34a853; }}
+            .search-box {{ max-width: 584px; margin: 0 auto 20px; }}
+            .search-box input[type="text"] {{
+                width: 100%; padding: 12px 20px; font-size: 16px;
+                border: 1px solid #dfe1e5; border-radius: 24px;
+                box-shadow: 0 1px 6px rgba(32,33,36,0.28); outline: none;
+            }}
+            .search-box input[type="submit"] {{
+                background-color: #f8f9fa; border: 1px solid #f8f9fa;
+                border-radius: 4px; color: #3c4043; font-size: 14px;
+                padding: 10px 16px; margin: 11px 4px; cursor: pointer;
+            }}
+            .search-box input[type="submit"]:hover {{
+                border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+            }}
+            .search-buttons {{ text-align: center; }}
+            .results {{ max-width: 652px; margin: 0 auto; }}
+            .search-result {{ margin-bottom: 28px; }}
+            .search-result a {{ color: #1a0dab; font-size: 20px; text-decoration: none; }}
+            .search-result a:hover {{ text-decoration: underline; }}
+            .search-result .url {{ color: #006621; font-size: 14px; line-height: 20px; }}
+            .search-result p {{ color: #4d5156; font-size: 14px; line-height: 22px; margin: 0; }}
+            .pagination {{ text-align: center; margin: 40px 0; }}
+            .pagination a, .pagination span {{
+                color: #1a0dab; font-size: 14px; margin: 0 8px; text-decoration: none;
+            }}
+            .pagination a:hover {{ text-decoration: underline; }}
+            .progress-container {{ display: none; max-width: 584px; margin: 20px auto; }}
+            .progress-bar {{
+                width: 0%; height: 20px; background-color: #4285f4;
+                border-radius: 10px; animation: progress 2s infinite;
+            }}
+            @keyframes progress {{
+                0% {{ width: 0%; }}
+                50% {{ width: 100%; }}
+                100% {{ width: 0%; }}
+            }}
+        </style>
+        <script>
+            function showProgress() {{
+                document.getElementById('progress').style.display = 'block';
+            }}
+        </script>
+    </head>
+    <body>
+        <div class="header">
+            <div class="logo">
+                <span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
+            </div>
+        </div>
+        <div class="search-box">
+            <form method="get" action="/" onsubmit="showProgress()">
+                <input type="text" name="query" value="{html.escape(query)}">
+                <input type="hidden" name="page" value="1">
+                <div class="search-buttons">
+                    <input type="submit" name="btn" value="LLM Search">
+                    <input type="submit" name="btn" value="I'm Feeling Lucky">
+                </div>
+            </form>
+        </div>
+        <div class="progress-container" id="progress">
+            <div class="progress-bar"></div>
+        </div>
+        <div class="results">
+            <h2 style="font-size: 18px; color: #70757a; margin-bottom: 20px;">Results for '{html.escape(query)}' (Page {page} of {total_pages})</h2>
+    """
+    for result in paginated_results:
+        title = html.escape(result.get("title", "No title"))
+        snippet = html.escape(result.get("snippet", "No snippet"))
+        url = html.escape(result.get("url", "#"))
+        html_content += f"""
+        <div class="search-result">
+            <a href="{url}" target="_blank">{title}</a>
+            <div class="url">{url}</div>
+            <p>{snippet}</p>
+        </div>
+        """
+    encoded_query = quote(query)
+    prev_link = f'<a href="/?query={encoded_query}&page={page-1}&btn=LLM+Search">Previous</a>' if page > 1 else '<span>Previous</span>'
+    next_link = f'<a href="/?query={encoded_query}&page={page+1}&btn=LLM+Search">Next</a>' if page < total_pages else '<span>Next</span>'
+    html_content += f"""
+        </div>
+        <div class="pagination">
+            {prev_link}
+            <span>Page {page} of {total_pages}</span>
+            {next_link}
+        </div>
+    </body>
+    </html>
+    """
+    return render_template_string(html_content)
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=int(os.environ.get("PORT", 5000)))