Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -17,8 +17,8 @@ client = OpenAI(
|
|
17 |
RESULTS_PER_PAGE = 10
|
18 |
TOTAL_RESULTS = 30 # Generate 30 results to allow pagination
|
19 |
|
20 |
-
def fetch_search_results(query
|
21 |
-
"""Fetch search results from the LLM
|
22 |
if not query.strip():
|
23 |
return None, "Please enter a search query."
|
24 |
|
@@ -39,25 +39,21 @@ def fetch_search_results(query, stream=False):
|
|
39 |
{"role": "system", "content": "You are a helpful search engine."},
|
40 |
{"role": "user", "content": prompt}
|
41 |
],
|
42 |
-
response_format={"type": "json_object"}
|
43 |
-
stream=stream # Enable streaming if requested
|
44 |
)
|
45 |
|
46 |
-
|
47 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
48 |
else:
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
# Handle different possible JSON structures
|
53 |
-
if isinstance(results, dict) and "results" in results:
|
54 |
-
results = results["results"]
|
55 |
-
elif isinstance(results, list):
|
56 |
-
pass
|
57 |
-
else:
|
58 |
-
return None, "Error: Unexpected JSON structure."
|
59 |
-
|
60 |
-
return results, None
|
61 |
|
62 |
except Exception as e:
|
63 |
error_msg = str(e)
|
@@ -68,97 +64,9 @@ def fetch_search_results(query, stream=False):
|
|
68 |
else:
|
69 |
return None, f"Error: {error_msg}"
|
70 |
|
71 |
-
def stream_search_results(query, page):
|
72 |
-
"""Stream search results incrementally after accumulating the full response."""
|
73 |
-
stream_response, error = fetch_search_results(query, stream=True)
|
74 |
-
if error:
|
75 |
-
yield f"<p style='color: red; text-align: center;'>{error}</p>"
|
76 |
-
return
|
77 |
-
|
78 |
-
# Step 1: Accumulate the full response
|
79 |
-
buffer = ""
|
80 |
-
for chunk in stream_response:
|
81 |
-
if chunk.choices[0].delta.content:
|
82 |
-
buffer += chunk.choices[0].delta.content
|
83 |
-
|
84 |
-
# Step 2: Parse the full JSON response
|
85 |
-
try:
|
86 |
-
results = json.loads(buffer)
|
87 |
-
if isinstance(results, dict) and "results" in results:
|
88 |
-
results = results["results"]
|
89 |
-
elif not isinstance(results, list):
|
90 |
-
yield "<p style='color: red; text-align: center;'>Error: Unexpected JSON structure.</p>"
|
91 |
-
return
|
92 |
-
except json.JSONDecodeError:
|
93 |
-
yield "<p style='color: red; text-align: center;'>Error: Failed to parse JSON response.</p>"
|
94 |
-
return
|
95 |
-
|
96 |
-
# Step 3: Calculate pagination
|
97 |
-
RESULTS_PER_PAGE = 10 # Adjust this as needed
|
98 |
-
start_idx = (page - 1) * RESULTS_PER_PAGE
|
99 |
-
end_idx = min(start_idx + RESULTS_PER_PAGE, len(results))
|
100 |
-
total_pages = (len(results) + RESULTS_PER_PAGE - 1) // RESULTS_PER_PAGE
|
101 |
-
|
102 |
-
# Step 4: Generate and yield the header
|
103 |
-
header = f"""
|
104 |
-
<html>
|
105 |
-
<head>
|
106 |
-
<title>LLM Search Engine</title>
|
107 |
-
<style>
|
108 |
-
body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; color: #202124; }}
|
109 |
-
.results {{ max-width: 652px; margin: 0 auto; }}
|
110 |
-
.search-result {{ margin-bottom: 28px; }}
|
111 |
-
.search-result a {{ color: #1a0dab; font-size: 20px; text-decoration: none; }}
|
112 |
-
.search-result a:hover {{ text-decoration: underline; }}
|
113 |
-
.search-result .url {{ color: #006621; font-size: 14px; line-height: 20px; }}
|
114 |
-
.search-result p {{ color: #4d5156; font-size: 14px; line-height: 22px; margin: 0; }}
|
115 |
-
.pagination {{ text-align: center; margin: 40px 0; }}
|
116 |
-
.pagination a, .pagination span {{
|
117 |
-
color: #1a0dab; font-size: 14px; margin: 0 8px; text-decoration: none;
|
118 |
-
}}
|
119 |
-
.pagination a:hover {{ text-decoration: underline; }}
|
120 |
-
</style>
|
121 |
-
</head>
|
122 |
-
<body>
|
123 |
-
<div class="results">
|
124 |
-
<h2 style="font-size: 18px; color: #70757a; margin-bottom: 20px;">Results for '{query}' (Page {page} of {total_pages})</h2>
|
125 |
-
"""
|
126 |
-
yield header
|
127 |
-
|
128 |
-
# Step 5: Yield each result for the current page
|
129 |
-
for i in range(start_idx, end_idx):
|
130 |
-
if i < len(results):
|
131 |
-
result = results[i]
|
132 |
-
title = result.get("title", "No title")
|
133 |
-
snippet = result.get("snippet", "No snippet")
|
134 |
-
url = result.get("url", "#")
|
135 |
-
yield f"""
|
136 |
-
<div class="search-result">
|
137 |
-
<a href="{url}" target="_blank">{title}</a>
|
138 |
-
<div class="url">{url}</div>
|
139 |
-
<p>{snippet}</p>
|
140 |
-
</div>
|
141 |
-
"""
|
142 |
-
|
143 |
-
# Step 6: Yield pagination links
|
144 |
-
from urllib.parse import quote
|
145 |
-
encoded_query = quote(query)
|
146 |
-
prev_link = f'<a href="/?query={encoded_query}&page={page-1}&btn=LLM+Search">Previous</a>' if page > 1 else '<span>Previous</span>'
|
147 |
-
next_link = f'<a href="/?query={encoded_query}&page={page+1}&btn=LLM+Search">Next</a>' if page < total_pages else '<span>Next</span>'
|
148 |
-
yield f"""
|
149 |
-
</div>
|
150 |
-
<div class="pagination">
|
151 |
-
{prev_link}
|
152 |
-
<span>Page {page} of {total_pages}</span>
|
153 |
-
{next_link}
|
154 |
-
</div>
|
155 |
-
</body>
|
156 |
-
</html>
|
157 |
-
"""
|
158 |
-
|
159 |
@app.route('/', methods=['GET'])
|
160 |
def search_page():
|
161 |
-
"""
|
162 |
query = request.args.get('query', '')
|
163 |
page = request.args.get('page', '1')
|
164 |
btn = request.args.get('btn', 'LLM Search')
|
@@ -167,13 +75,14 @@ def search_page():
|
|
167 |
except ValueError:
|
168 |
page = 1
|
169 |
|
|
|
170 |
if not query.strip():
|
171 |
html_content = """
|
172 |
<html>
|
173 |
<head>
|
174 |
<title>LLM Search Engine</title>
|
175 |
<style>
|
176 |
-
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
|
177 |
.header { text-align: center; margin-bottom: 20px; }
|
178 |
.logo { font-size: 36px; font-weight: bold; }
|
179 |
.logo span:nth-child(1) { color: #4285f4; }
|
@@ -196,7 +105,22 @@ def search_page():
|
|
196 |
border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
197 |
}
|
198 |
.search-buttons { text-align: center; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
199 |
</style>
|
|
|
|
|
|
|
|
|
|
|
200 |
</head>
|
201 |
<body>
|
202 |
<div class="header">
|
@@ -205,7 +129,7 @@ def search_page():
|
|
205 |
</div>
|
206 |
</div>
|
207 |
<div class="search-box">
|
208 |
-
<form method="get" action="/">
|
209 |
<input type="text" name="query" placeholder="Search...">
|
210 |
<input type="hidden" name="page" value="1">
|
211 |
<div class="search-buttons">
|
@@ -214,27 +138,73 @@ def search_page():
|
|
214 |
</div>
|
215 |
</form>
|
216 |
</div>
|
|
|
|
|
|
|
217 |
</body>
|
218 |
</html>
|
219 |
"""
|
220 |
return render_template_string(html_content)
|
221 |
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
228 |
-
|
229 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
230 |
<form method="get" action="/">
|
231 |
<input type="text" name="query" value="{html.escape(query)}">
|
232 |
-
<input type="
|
|
|
|
|
|
|
|
|
233 |
</form>
|
234 |
-
|
235 |
-
</
|
236 |
-
|
237 |
-
|
|
|
|
|
|
|
|
|
|
|
238 |
first_url = results[0].get("url", "#") if results else "#"
|
239 |
return Response(f"""
|
240 |
<html>
|
@@ -247,8 +217,172 @@ def search_page():
|
|
247 |
</html>
|
248 |
""", mimetype="text/html")
|
249 |
|
250 |
-
#
|
251 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
252 |
|
253 |
if __name__ == '__main__':
|
254 |
app.run(debug=True, host='0.0.0.0', port=int(os.environ.get("PORT", 5000)))
|
|
|
17 |
RESULTS_PER_PAGE = 10
|
18 |
TOTAL_RESULTS = 30 # Generate 30 results to allow pagination
|
19 |
|
20 |
+
def fetch_search_results(query):
|
21 |
+
"""Fetch search results from the LLM without streaming."""
|
22 |
if not query.strip():
|
23 |
return None, "Please enter a search query."
|
24 |
|
|
|
39 |
{"role": "system", "content": "You are a helpful search engine."},
|
40 |
{"role": "user", "content": prompt}
|
41 |
],
|
42 |
+
response_format={"type": "json_object"}
|
|
|
43 |
)
|
44 |
|
45 |
+
content = response.choices[0].message.content
|
46 |
+
results = json.loads(content)
|
47 |
+
|
48 |
+
# Handle different possible JSON structures
|
49 |
+
if isinstance(results, dict) and "results" in results:
|
50 |
+
results = results["results"]
|
51 |
+
elif isinstance(results, list):
|
52 |
+
pass
|
53 |
else:
|
54 |
+
return None, "Error: Unexpected JSON structure."
|
55 |
+
|
56 |
+
return results, None
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
57 |
|
58 |
except Exception as e:
|
59 |
error_msg = str(e)
|
|
|
64 |
else:
|
65 |
return None, f"Error: {error_msg}"
|
66 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
67 |
@app.route('/', methods=['GET'])
|
68 |
def search_page():
|
69 |
+
"""Serve the initial page or process search with progress bar."""
|
70 |
query = request.args.get('query', '')
|
71 |
page = request.args.get('page', '1')
|
72 |
btn = request.args.get('btn', 'LLM Search')
|
|
|
75 |
except ValueError:
|
76 |
page = 1
|
77 |
|
78 |
+
# Initial page (no query yet)
|
79 |
if not query.strip():
|
80 |
html_content = """
|
81 |
<html>
|
82 |
<head>
|
83 |
<title>LLM Search Engine</title>
|
84 |
<style>
|
85 |
+
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }
|
86 |
.header { text-align: center; margin-bottom: 20px; }
|
87 |
.logo { font-size: 36px; font-weight: bold; }
|
88 |
.logo span:nth-child(1) { color: #4285f4; }
|
|
|
105 |
border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
106 |
}
|
107 |
.search-buttons { text-align: center; }
|
108 |
+
.progress-container { display: none; max-width: 584px; margin: 20px auto; }
|
109 |
+
.progress-bar {
|
110 |
+
width: 0%; height: 20px; background-color: #4285f4;
|
111 |
+
border-radius: 10px; animation: progress 2s infinite;
|
112 |
+
}
|
113 |
+
@keyframes progress {
|
114 |
+
0% { width: 0%; }
|
115 |
+
50% { width: 100%; }
|
116 |
+
100% { width: 0%; }
|
117 |
+
}
|
118 |
</style>
|
119 |
+
<script>
|
120 |
+
function showProgress() {
|
121 |
+
document.getElementById('progress').style.display = 'block';
|
122 |
+
}
|
123 |
+
</script>
|
124 |
</head>
|
125 |
<body>
|
126 |
<div class="header">
|
|
|
129 |
</div>
|
130 |
</div>
|
131 |
<div class="search-box">
|
132 |
+
<form method="get" action="/" onsubmit="showProgress()">
|
133 |
<input type="text" name="query" placeholder="Search...">
|
134 |
<input type="hidden" name="page" value="1">
|
135 |
<div class="search-buttons">
|
|
|
138 |
</div>
|
139 |
</form>
|
140 |
</div>
|
141 |
+
<div class="progress-container" id="progress">
|
142 |
+
<div class="progress-bar"></div>
|
143 |
+
</div>
|
144 |
</body>
|
145 |
</html>
|
146 |
"""
|
147 |
return render_template_string(html_content)
|
148 |
|
149 |
+
# Show progress bar and fetch results
|
150 |
+
results, error = fetch_search_results(query)
|
151 |
+
|
152 |
+
if error:
|
153 |
+
html_content = f"""
|
154 |
+
<html>
|
155 |
+
<head>
|
156 |
+
<title>LLM Search Engine</title>
|
157 |
+
<style>
|
158 |
+
body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }}
|
159 |
+
.header {{ text-align: center; margin-bottom: 20px; }}
|
160 |
+
.logo {{ font-size: 36px; font-weight: bold; }}
|
161 |
+
.logo span:nth-child(1) {{ color: #4285f4; }}
|
162 |
+
.logo span:nth-child(2) {{ color: #ea4335; }}
|
163 |
+
.logo span:nth-child(3) {{ color: #fbbc05; }}
|
164 |
+
.logo span:nth-child(4) {{ color: #4285f4; }}
|
165 |
+
.logo span:nth-child(5) {{ color: #34a853; }}
|
166 |
+
.search-box {{ max-width: 584px; margin: 0 auto; }}
|
167 |
+
.search-box input[type="text"] {{
|
168 |
+
width: 100%; padding: 12px 20px; font-size: 16px;
|
169 |
+
border: 1px solid #dfe1e5; border-radius: 24px;
|
170 |
+
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
|
171 |
+
}}
|
172 |
+
.search-box input[type="submit"] {{
|
173 |
+
background-color: #f8f9fa; border: 1px solid #f8f9fa;
|
174 |
+
border-radius: 4px; color: #3c4043; font-size: 14px;
|
175 |
+
padding: 10px 16px; margin: 11px 4px; cursor: pointer;
|
176 |
+
}}
|
177 |
+
.search-box input[type="submit"]:hover {{
|
178 |
+
border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
179 |
+
}}
|
180 |
+
.search-buttons {{ text-align: center; }}
|
181 |
+
.error {{ color: red; text-align: center; }}
|
182 |
+
</style>
|
183 |
+
</head>
|
184 |
+
<body>
|
185 |
+
<div class="header">
|
186 |
+
<div class="logo">
|
187 |
+
<span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
|
188 |
+
</div>
|
189 |
+
</div>
|
190 |
+
<div class="search-box">
|
191 |
<form method="get" action="/">
|
192 |
<input type="text" name="query" value="{html.escape(query)}">
|
193 |
+
<input type="hidden" name="page" value="1">
|
194 |
+
<div class="search-buttons">
|
195 |
+
<input type="submit" name="btn" value="LLM Search">
|
196 |
+
<input type="submit" name="btn" value="I'm Feeling Lucky">
|
197 |
+
</div>
|
198 |
</form>
|
199 |
+
</div>
|
200 |
+
<p class="error">{error}</p>
|
201 |
+
</body>
|
202 |
+
</html>
|
203 |
+
"""
|
204 |
+
return render_template_string(html_content)
|
205 |
+
|
206 |
+
# "I'm Feeling Lucky" redirects to the first URL
|
207 |
+
if btn == "I'm Feeling Lucky":
|
208 |
first_url = results[0].get("url", "#") if results else "#"
|
209 |
return Response(f"""
|
210 |
<html>
|
|
|
217 |
</html>
|
218 |
""", mimetype="text/html")
|
219 |
|
220 |
+
# Calculate pagination for "LLM Search"
|
221 |
+
start_idx = (page - 1) * RESULTS_PER_PAGE
|
222 |
+
end_idx = min(start_idx + RESULTS_PER_PAGE, len(results))
|
223 |
+
total_pages = (len(results) + RESULTS_PER_PAGE - 1) // RESULTS_PER_PAGE
|
224 |
+
|
225 |
+
if start_idx >= len(results):
|
226 |
+
html_content = f"""
|
227 |
+
<html>
|
228 |
+
<head>
|
229 |
+
<title>LLM Search Engine</title>
|
230 |
+
<style>
|
231 |
+
body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #fff; }}
|
232 |
+
.header {{ text-align: center; margin-bottom: 20px; }}
|
233 |
+
.logo {{ font-size: 36px; font-weight: bold; }}
|
234 |
+
.logo span:nth-child(1) {{ color: #4285f4; }}
|
235 |
+
.logo span:nth-child(2) {{ color: #ea4335; }}
|
236 |
+
.logo span:nth-child(3) {{ color: #fbbc05; }}
|
237 |
+
.logo span:nth-child(4) {{ color: #4285f4; }}
|
238 |
+
.logo span:nth-child(5) {{ color: #34a853; }}
|
239 |
+
.search-box {{ max-width: 584px; margin: 0 auto; }}
|
240 |
+
.search-box input[type="text"] {{
|
241 |
+
width: 100%; padding: 12px 20px; font-size: 16px;
|
242 |
+
border: 1px solid #dfe1e5; border-radius: 24px;
|
243 |
+
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
|
244 |
+
}}
|
245 |
+
.search-box input[type="submit"] {{
|
246 |
+
background-color: #f8f9fa; border: 1px solid #f8f9fa;
|
247 |
+
border-radius: 4px; color: #3c4043; font-size: 14px;
|
248 |
+
padding: 10px 16px; margin: 11px 4px; cursor: pointer;
|
249 |
+
}}
|
250 |
+
.search-box input[type="submit"]:hover {{
|
251 |
+
border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
252 |
+
}}
|
253 |
+
.search-buttons {{ text-align: center; }}
|
254 |
+
</style>
|
255 |
+
</head>
|
256 |
+
<body>
|
257 |
+
<div class="header">
|
258 |
+
<div class="logo">
|
259 |
+
<span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
|
260 |
+
</div>
|
261 |
+
</div>
|
262 |
+
<div class="search-box">
|
263 |
+
<form method="get" action="/">
|
264 |
+
<input type="text" name="query" value="{html.escape(query)}">
|
265 |
+
<input type="hidden" name="page" value="1">
|
266 |
+
<div class="search-buttons">
|
267 |
+
<input type="submit" name="btn" value="LLM Search">
|
268 |
+
<input type="submit" name="btn" value="I'm Feeling Lucky">
|
269 |
+
</div>
|
270 |
+
</form>
|
271 |
+
</div>
|
272 |
+
<p style="text-align: center;">No more results to display.</p>
|
273 |
+
</body>
|
274 |
+
</html>
|
275 |
+
"""
|
276 |
+
return render_template_string(html_content)
|
277 |
+
|
278 |
+
# Generate full results page for "LLM Search"
|
279 |
+
paginated_results = results[start_idx:end_idx]
|
280 |
+
html_content = f"""
|
281 |
+
<html>
|
282 |
+
<head>
|
283 |
+
<title>LLM Search Engine</title>
|
284 |
+
<style>
|
285 |
+
body {{ font-family: Arial, sans-serif; margin: 0; padding: 0; color: #202124; background-color: #fff; }}
|
286 |
+
.header {{ text-align: center; padding: 20px 0; }}
|
287 |
+
.logo {{ font-size: 36px; font-weight: bold; }}
|
288 |
+
.logo span:nth-child(1) {{ color: #4285f4; }}
|
289 |
+
.logo span:nth-child(2) {{ color: #ea4335; }}
|
290 |
+
.logo span:nth-child(3) {{ color: #fbbc05; }}
|
291 |
+
.logo span:nth-child(4) {{ color: #4285f4; }}
|
292 |
+
.logo span:nth-child(5) {{ color: #34a853; }}
|
293 |
+
.search-box {{ max-width: 584px; margin: 0 auto 20px; }}
|
294 |
+
.search-box input[type="text"] {{
|
295 |
+
width: 100%; padding: 12px 20px; font-size: 16px;
|
296 |
+
border: 1px solid #dfe1e5; border-radius: 24px;
|
297 |
+
box-shadow: 0 1px 6px rgba(32,33,36,0.28); outline: none;
|
298 |
+
}}
|
299 |
+
.search-box input[type="submit"] {{
|
300 |
+
background-color: #f8f9fa; border: 1px solid #f8f9fa;
|
301 |
+
border-radius: 4px; color: #3c4043; font-size: 14px;
|
302 |
+
padding: 10px 16px; margin: 11px 4px; cursor: pointer;
|
303 |
+
}}
|
304 |
+
.search-box input[type="submit"]:hover {{
|
305 |
+
border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
306 |
+
}}
|
307 |
+
.search-buttons {{ text-align: center; }}
|
308 |
+
.results {{ max-width: 652px; margin: 0 auto; }}
|
309 |
+
.search-result {{ margin-bottom: 28px; }}
|
310 |
+
.search-result a {{ color: #1a0dab; font-size: 20px; text-decoration: none; }}
|
311 |
+
.search-result a:hover {{ text-decoration: underline; }}
|
312 |
+
.search-result .url {{ color: #006621; font-size: 14px; line-height: 20px; }}
|
313 |
+
.search-result p {{ color: #4d5156; font-size: 14px; line-height: 22px; margin: 0; }}
|
314 |
+
.pagination {{ text-align: center; margin: 40px 0; }}
|
315 |
+
.pagination a, .pagination span {{
|
316 |
+
color: #1a0dab; font-size: 14px; margin: 0 8px; text-decoration: none;
|
317 |
+
}}
|
318 |
+
.pagination a:hover {{ text-decoration: underline; }}
|
319 |
+
.progress-container {{ display: none; max-width: 584px; margin: 20px auto; }}
|
320 |
+
.progress-bar {{
|
321 |
+
width: 0%; height: 20px; background-color: #4285f4;
|
322 |
+
border-radius: 10px; animation: progress 2s infinite;
|
323 |
+
}}
|
324 |
+
@keyframes progress {{
|
325 |
+
0% {{ width: 0%; }}
|
326 |
+
50% {{ width: 100%; }}
|
327 |
+
100% {{ width: 0%; }}
|
328 |
+
}}
|
329 |
+
</style>
|
330 |
+
<script>
|
331 |
+
function showProgress() {{
|
332 |
+
document.getElementById('progress').style.display = 'block';
|
333 |
+
}}
|
334 |
+
</script>
|
335 |
+
</head>
|
336 |
+
<body>
|
337 |
+
<div class="header">
|
338 |
+
<div class="logo">
|
339 |
+
<span>L</span><span>L</span><span>M</span><span> </span><span>Search</span>
|
340 |
+
</div>
|
341 |
+
</div>
|
342 |
+
<div class="search-box">
|
343 |
+
<form method="get" action="/" onsubmit="showProgress()">
|
344 |
+
<input type="text" name="query" value="{html.escape(query)}">
|
345 |
+
<input type="hidden" name="page" value="1">
|
346 |
+
<div class="search-buttons">
|
347 |
+
<input type="submit" name="btn" value="LLM Search">
|
348 |
+
<input type="submit" name="btn" value="I'm Feeling Lucky">
|
349 |
+
</div>
|
350 |
+
</form>
|
351 |
+
</div>
|
352 |
+
<div class="progress-container" id="progress">
|
353 |
+
<div class="progress-bar"></div>
|
354 |
+
</div>
|
355 |
+
<div class="results">
|
356 |
+
<h2 style="font-size: 18px; color: #70757a; margin-bottom: 20px;">Results for '{html.escape(query)}' (Page {page} of {total_pages})</h2>
|
357 |
+
"""
|
358 |
+
|
359 |
+
for result in paginated_results:
|
360 |
+
title = html.escape(result.get("title", "No title"))
|
361 |
+
snippet = html.escape(result.get("snippet", "No snippet"))
|
362 |
+
url = html.escape(result.get("url", "#"))
|
363 |
+
html_content += f"""
|
364 |
+
<div class="search-result">
|
365 |
+
<a href="{url}" target="_blank">{title}</a>
|
366 |
+
<div class="url">{url}</div>
|
367 |
+
<p>{snippet}</p>
|
368 |
+
</div>
|
369 |
+
"""
|
370 |
+
|
371 |
+
encoded_query = quote(query)
|
372 |
+
prev_link = f'<a href="/?query={encoded_query}&page={page-1}&btn=LLM+Search">Previous</a>' if page > 1 else '<span>Previous</span>'
|
373 |
+
next_link = f'<a href="/?query={encoded_query}&page={page+1}&btn=LLM+Search">Next</a>' if page < total_pages else '<span>Next</span>'
|
374 |
+
html_content += f"""
|
375 |
+
</div>
|
376 |
+
<div class="pagination">
|
377 |
+
{prev_link}
|
378 |
+
<span>Page {page} of {total_pages}</span>
|
379 |
+
{next_link}
|
380 |
+
</div>
|
381 |
+
</body>
|
382 |
+
</html>
|
383 |
+
"""
|
384 |
+
|
385 |
+
return render_template_string(html_content)
|
386 |
|
387 |
if __name__ == '__main__':
|
388 |
app.run(debug=True, host='0.0.0.0', port=int(os.environ.get("PORT", 5000)))
|