Upload 8 files

app/app.py

@@ -0,0 +1,86 @@
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+import cv2
+import easyocr
+import numpy as np
+import tensorflow as tf
+
+app = Flask(__name__)
+CORS(app)
+
+# Load your pre-trained model and set up the test set for phone recognition
+test_set = tf.keras.utils.image_dataset_from_directory(
+    "/app/testing_data",
+    labels="inferred",
+    label_mode="categorical",
+    class_names=None,
+    color_mode="rgb",
+    batch_size=32,
+    image_size=(64, 64),
+    shuffle=True,
+    seed=None,
+    validation_split=None,
+    subset=None,
+    interpolation="bilinear",
+    follow_links=False,
+    crop_to_aspect_ratio=False
+)
+
+# Load the CNN model for phone recognition
+cnn = tf.keras.models.load_model("/app/trained_model (1).h5")
+
+# Instantiate text reader for OCR
+picture_read = easyocr.Reader(["en", "ar"], gpu=False)
+
+def get_class_names():
+    # Load the class names from the test_set
+    return test_set.class_names
+
+class_names = get_class_names()
+
+# Route for rendering the index.html template
+@app.route("/")
+def index():
+    # Pass the class names to the HTML template
+    return render_template("index.html", class_names=class_names)
+
+# Route for phone recognition and processing image
+@app.route("/process_image", methods=["POST"])
+def process_image():
+    # Get the uploaded file from the request
+    uploaded_file = request.files["file"]
+
+    # Save the file to a temporary location
+    temp_file_path = "/app/temp_image.png"
+    uploaded_file.save(temp_file_path)
+
+    # Read and preprocess the image for phone model recognition
+    img = cv2.imread(temp_file_path)
+    img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+    img = cv2.resize(img, (64, 64))
+
+    # Make predictions for phone model
+    input_arr = np.array([img])
+    predictions = cnn.predict(input_arr)
+
+    # Get the index with the highest probability
+    result_index = np.argmax(predictions)
+
+    # Display the predicted class for phone model
+    result_phone_model = class_names[result_index]
+
+    # Process image using OCR
+    picture_results = picture_read.readtext(temp_file_path)
+    results_ocr = []
+
+    conf_threshold = 0.2
+    for y in picture_results:
+        if y[2] > conf_threshold:
+            text = y[1]
+            results_ocr.append({"text": text})
+
+    # Return JSON response with the results
+    return jsonify({"result_phone_model": result_phone_model, "results_ocr": results_ocr})
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=8000, debug=True)

app/static/myStyles.css

@@ -0,0 +1,97 @@
+body {
+  background-image: url(images/background.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.brand-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 13%;
+  text-align: center;
+}
+
+.brand-container img {
+  display: block;
+  width: 130%;
+  max-width: 1500px;
+}
+
+span {
+  color: #f3f3f3;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 30px;
+  margin-top: 5%;
+}
+
+.buttons-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 0;
+  margin-top: 10%;
+}
+
+label {
+  cursor: pointer;
+  margin: -3px;
+}
+
+input[type="file"] {
+  display: none;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  display: none;
+}
+
+label img {
+  transition: transform 0.2s ease-in-out;
+}
+
+label:hover img {
+  transform: scale(1.1);
+}
+/*loading screen*/
+
+#loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(images/background.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.loading-spinner {
+  border: 8px solid lightgray;
+  border-top: 8px solid silver;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

app/templates/index.html

@@ -0,0 +1,140 @@
+<!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>