| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>FastAPI Search Client</title>
|
| <style>
|
| body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; }
|
| .input-group { margin-bottom: 15px; }
|
| textarea { width: 300px; padding: 8px; resize: vertical; }
|
| #results { margin-top: 20px; }
|
| .result { margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; }
|
| </style>
|
| </head>
|
| <body>
|
| <h2>FastAPI Search Client</h2>
|
|
|
| <div class="input-group">
|
| <label>API Key:</label><br>
|
| <textarea id="apiKey" placeholder="Enter your API_SECRET_KEY"></textarea>
|
| </div>
|
|
|
| <div class="input-group">
|
| <input type="text" id="query" placeholder="Enter search query and press Enter..."
|
| style="width: 300px; padding: 8px;">
|
| </div>
|
|
|
| <div id="results"></div>
|
|
|
| <script>
|
| const API_URL = 'https://huggingface.co/spaces/Almaatla/search';
|
|
|
| document.getElementById('query').addEventListener('keypress', async (e) => {
|
| if (e.key === 'Enter') {
|
| const apiKey = document.getElementById('apiKey').value.trim();
|
| const query = e.target.value.trim();
|
|
|
| if (!apiKey || !query) {
|
| alert('Please enter both API key and search query');
|
| return;
|
| }
|
|
|
| try {
|
| const response = await fetch(API_URL, {
|
| method: 'POST',
|
| headers: {
|
| 'Content-Type': 'application/json',
|
| 'X-API-Key': apiKey
|
| },
|
| body: JSON.stringify({
|
| query: query,
|
| engine: 'google',
|
| num_results: 10
|
| })
|
| });
|
|
|
| if (!response.ok) {
|
| throw new Error(`HTTP error! status: ${response.status}`);
|
| }
|
|
|
| const data = await response.json();
|
| displayResults(data);
|
| } catch (error) {
|
| console.error('Error:', error);
|
| document.getElementById('results').innerHTML = `
|
| <div class="error">
|
| Error: ${error.message}
|
| </div>
|
| `;
|
| }
|
| }
|
| });
|
|
|
| function displayResults(data) {
|
| const results = document.getElementById('results');
|
| let html = '';
|
|
|
| if (data.organic_results?.length > 0) {
|
| html += '<h3>Search Results:</h3>';
|
| data.organic_results.forEach(result => {
|
| html += `
|
| <div class="result">
|
| <a href="${result.link}" target="_blank">${result.title}</a>
|
| <p>${result.snippet}</p>
|
| <small>${result.displayed_link}</small>
|
| </div>
|
| `;
|
| });
|
| }
|
|
|
| if (data.related_searches?.length > 0) {
|
| html += '<h3>Related Searches:</h3>';
|
| data.related_searches.forEach(search => {
|
| html += `
|
| <div class="result">
|
| ${search.query}
|
| </div>
|
| `;
|
| });
|
| }
|
|
|
| results.innerHTML = html || '<p>No results found</p>';
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
