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>Mobile Diagnostics</title> | |
| <link rel="stylesheet" href="/static/myStyles.css" /> | |
| <script src="/static/script.js"></script> | |
| <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script> | |
| <script src="https://mediafiles.botpress.cloud/9f157b03-6640-43c0-b364-fdf445bdcbcb/webchat/config.js" defer></script> | |
| </head> | |
| <body> | |
| <div id="loading-screen"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| <div class="brand-container"> | |
| <img src="/static/images/brandName.png" alt="Mobile Diagnostics" width="1500px" /> | |
| <span>Your troubleshooting buddy on the go.</span> | |
| </div> | |
| <div class="buttons-container" id="buttons"> | |
| <label for="upload"> | |
| <img src="/static/images/detectPhone.png" alt="Upload Image" /> | |
| <input type="file" id="upload" accept=".png, .jpg, .jpeg" /> | |
| </label> | |
| <label for="screenshot"> | |
| <img src="/static/images/errorScreenshot.png" alt="Screenshot Image" /> | |
| <input type="file" id="screenshot" accept=".png, .jpg, .jpeg" /> | |
| </label> | |
| <label for="chat"> | |
| <img src="/static/images/chat.png" alt="Chat with Us" /> | |
| <button id="chat">Chat</button> | |
| </label> | |
| <div id="result"></div> | |
| </div> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function () { | |
| setTimeout(function () { | |
| document.getElementById("loading-screen").style.display = "none"; | |
| }, 3000); | |
| }); | |
| const upload = document.getElementById("upload"); | |
| const screenshot = document.getElementById("screenshot"); | |
| const chat = document.getElementById("chat"); | |
| function showBot() { | |
| window.botpressWebChat.sendEvent({ type: "show" }); | |
| } | |
| function hideButtons() { | |
| document.getElementById("buttons").style.display = "none"; | |
| } | |
| upload.addEventListener("change", function () { | |
| var fileInput = document.getElementById("upload"); | |
| if (fileInput.files.length > 0) { | |
| const file = fileInput.files[0]; | |
| const formData = new FormData(); | |
| formData.append("file", file); | |
| fetch("/phone-recognition", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((result) => { | |
| const result_phone_model = result.result_phone_model; | |
| console.log(result_phone_model); | |
| window.botpressWebChat.sendPayload({ | |
| type: "text", | |
| payload: { | |
| result_phone_model, | |
| pressedButton: "upload", | |
| }, | |
| }); | |
| hideButtons(); | |
| showBot(); | |
| }) | |
| .catch((error) => { | |
| console.error("Error during phone recognition:", error); | |
| }); | |
| } | |
| }); | |
| screenshot.addEventListener("change", function () { | |
| var screenshotInput = document.getElementById("screenshot"); | |
| if (screenshotInput.files.length > 0) { | |
| const file = screenshotInput.files[0]; | |
| const formData = new FormData(); | |
| formData.append("file", file); | |
| fetch("/phone-recognition", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((result) => { | |
| const results_ocr = result.results_ocr; | |
| console.log(results_ocr); | |
| window.botpressWebChat.sendPayload({ | |
| type: "text", | |
| payload: { | |
| results_ocr, | |
| pressedButton: "screenshot", | |
| }, | |
| }); | |
| hideButtons(); | |
| showBot(); | |
| }) | |
| .catch((error) => { | |
| console.error("Error during image processing:", error); | |
| }); | |
| } | |
| }); | |
| // Event listener for chat button | |
| chat.addEventListener("click", function () { | |
| window.botpressWebChat.sendPayload({ | |
| type: "text", | |
| payload: { | |
| pressedButton: "chat", | |
| }, | |
| }); | |
| hideButtons(); | |
| showBot(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |