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>5/3/1 Workout Program Assistant</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@huggingface/chat-ui/dist/chat-ui.css"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| } | |
| #chat-container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .header { | |
| padding: 1rem; | |
| background-color: #f5f5f5; | |
| border-bottom: 1px solid #e0e0e0; | |
| } | |
| .header h1 { | |
| margin: 0; | |
| font-size: 1.5rem; | |
| color: #333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chat-container"> | |
| <div class="header"> | |
| <h1>5/3/1 Workout Program Assistant</h1> | |
| </div> | |
| <div id="chat"></div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/chat-ui/dist/chat-ui.js"></script> | |
| <script> | |
| const chat = new ChatUI({ | |
| container: document.getElementById('chat'), | |
| apiEndpoint: '/chat', | |
| uploadEndpoint: '/upload', | |
| welcomeMessage: 'Welcome to the 5/3/1 Workout Program Assistant! How can I help you today?', | |
| userMessageColor: '#4a90e2', | |
| assistantMessageColor: '#f5f5f5', | |
| inputPlaceholder: 'Type your message here...', | |
| uploadButtonText: 'Upload PDF', | |
| uploadAcceptedFileTypes: '.pdf', | |
| onMessage: async (message) => { | |
| try { | |
| const response = await fetch('/chat', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| messages: [{ | |
| role: 'user', | |
| content: message | |
| }] | |
| }) | |
| }); | |
| const data = await response.json(); | |
| return data.choices[0].message.content; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| return 'Sorry, there was an error processing your request.'; | |
| } | |
| }, | |
| onFileUpload: async (file) => { | |
| try { | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| const response = await fetch('/upload', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| return `File "${data.filename}" uploaded successfully. How can I help you with this file?`; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| return 'Sorry, there was an error uploading your file.'; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |