Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JTBD Identifier</title> | |
| <style> | |
| body { font-family: sans-serif; background-color: #f4f4f9; color: #333; max-width: 800px; margin: 40px auto; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius: 8px; } | |
| h1 { text-align: center; color: #4a4a4a; } | |
| textarea { width: 98%; min-height: 150px; padding: 10px; border-radius: 4px; border: 1px solid #ddd; margin-bottom: 10px; font-size: 16px; } | |
| button { display: block; width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 18px; cursor: pointer; } | |
| button:disabled { background-color: #aaa; } | |
| #results { margin-top: 20px; background-color: #e9ecef; padding: 15px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; } | |
| #results.hidden { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>JTBD Identifier AI Agent 🤖</h1> | |
| <p>Enter a context (e.g., from an email) below to identify the best matching "Job To Be Done".</p> | |
| <textarea id="contextInput" placeholder="e.g., Hi team, a customer just called saying their last bill was incorrect. Can someone from finance look into this?"></textarea> | |
| <button id="submitBtn" onclick="identifyJtbd()">Identify JTBD</button> | |
| <div id="results" class="hidden"></div> | |
| <script> | |
| const contextInput = document.getElementById('contextInput'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const resultsDiv = document.getElementById('results'); | |
| async function identifyJtbd() { | |
| const context = contextInput.value.trim(); | |
| if (!context) { | |
| alert("Please enter some text."); | |
| return; | |
| } | |
| // Disable button and show loading state | |
| submitBtn.disabled = true; | |
| submitBtn.innerText = 'Analyzing...'; | |
| resultsDiv.classList.remove('hidden'); | |
| resultsDiv.innerText = '🧠 Thinking...'; | |
| try { | |
| const response = await fetch('/identify_jtbd', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ context: context }), | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! Status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| // Format and display the results | |
| resultsDiv.innerText = JSON.stringify(data, null, 2); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| resultsDiv.innerText = `An error occurred: ${error.message}`; | |
| } finally { | |
| // Re-enable button | |
| submitBtn.disabled = false; | |
| submitBtn.innerText = 'Identify JTBD'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |