Spaces:
Runtime error
Runtime error
File size: 4,139 Bytes
df67334 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<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>
|