Initial commit: Add Flask app for deployment

.env

@@ -0,0 +1 @@
+OPENAI_API_KEY=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

Dockerfile

@@ -0,0 +1,20 @@
+# Use the official Python image as the base image
+FROM python:3.9
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy all project files into the container
+COPY . /app
+
+# Install required Python packages
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port Flask runs on
+EXPOSE 7860
+
+# Set environment variables (API key will be passed securely)
+ENV OPENAI_API_KEY=""
+
+# Command to run the Flask app using Gunicorn
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:app"]

Space.yaml

@@ -0,0 +1,7 @@
+---
+title: "Manhole Infrastructure Analysis"
+sdk: "docker"
+docker:
+  build: .
+  run: gunicorn -w 4 -b 0.0.0.0:7860 app:app
+---

app.py

@@ -0,0 +1,103 @@
+import os
+import base64
+import re
+from flask import Flask, render_template, request, redirect, url_for, flash
+from openai import OpenAI
+from PIL import Image
+from io import BytesIO
+
+# Initialize Flask app
+app = Flask(__name__)
+app.secret_key = 'supersecretkey'
+app.config['UPLOAD_FOLDER'] = 'static/uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Initialize OpenAI client
+# client = OpenAI()
+client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+
+
+# Function to convert image to Base64 PNG string
+def convert_to_png_base64(image_path):
+    try:
+        with Image.open(image_path) as img:
+            img = img.convert("RGBA")
+            buffer = BytesIO()
+            img.save(buffer, format="PNG")
+            buffer.seek(0)
+            return base64.b64encode(buffer.read()).decode("utf-8")
+    except Exception as e:
+        print(f"Error: {e}")
+        return None
+
+# Function to format response into clean HTML
+def format_response(message_content):
+    # Replace ### Heading with <h3>Heading</h3>
+    formatted = re.sub(r'^### (.*?)$', r'<h3>\1</h3>', message_content, flags=re.M)
+    # Replace **bold** with <strong>bold</strong>
+    formatted = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', formatted)
+    # Replace "- " with list items
+    formatted = re.sub(r'^\- (.*?)$', r'<li>\1</li>', formatted, flags=re.M)
+    # Wrap lists with <ul>
+    if '<li>' in formatted:
+        formatted = f"<ul>{formatted}</ul>"
+    return formatted
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        # Check if an image file was uploaded
+        if 'image' in request.files:
+            file = request.files['image']
+            if file.filename != '':
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+                file.save(filepath)
+                return render_template('index.html', uploaded_image=file.filename, response=None)
+
+        # Analyze button pressed
+        if 'analyze' in request.form:
+            image_name = request.form.get('uploaded_image')
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], image_name)
+
+            # Convert image to Base64
+            base64_image = convert_to_png_base64(filepath)
+            if not base64_image:
+                flash('Error processing image.')
+                return redirect(request.url)
+
+            # Send to OpenAI API
+            response = client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=[
+                    {
+                        "role": "user",
+                        "content": [
+                            {
+                                "type": "text",
+                                "text": '''You are an expert in analyzing infrastructure issues related to manholes. Your task is to analyze an image of a manhole(specially inside of red rectangle) and generate a detailed report with the following fields:
+                                            Ticket Number: Assign a unique identifier for the issue.
+                                            GPS Location: Provide a fake but realistic GPS coordinate.
+                                            Severity: Categorize the issue as Low, Medium, or High based on the visible damage.
+                                            Comment: Provide a brief explanation of the problem visible in the image.
+                                            Defect: Identify the specific defect (e.g., cracked cover, open manhole, debris obstruction, etc.).
+                                            Department: Always set as "Road/Manhole Management."
+                                            Action: Suggest an appropriate action based on the severity and type of defect.''',
+                            },
+                            {
+                                "type": "image_url",
+                                "image_url": {"url": f"data:image/jpeg;base64,{base64_image}"},
+                            },
+                        ],
+                    }
+                ],
+            )
+
+            # Extract response and format it
+            message_content = response.choices[0].message.content
+            formatted_content = format_response(message_content)
+            print(formatted_content)
+            return render_template('index.html', uploaded_image=image_name, response=formatted_content)
+
+    return render_template('index.html', uploaded_image=None, response=None)
+
+if __name__ == '__main__':
+    app.run(debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.3.2
+openai==0.27.0
+Pillow==10.0.0
+gunicorn
+python-dotenv

static/style.css

@@ -0,0 +1,93 @@
+/* General styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    background: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    max-width: 1200px;
+    width: 100%;
+}
+
+/* Header */
+h1 {
+    color: #333;
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+/* Form styles */
+form {
+    margin: 20px 0;
+    text-align: center;
+}
+
+input[type="file"], button {
+    margin: 10px 0;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    display: inline-block;
+    width: auto;
+}
+
+button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+/* Layout for result container */
+.result-container {
+    display: flex;
+    flex-direction: row; /* Ensures elements are side by side */
+    justify-content: flex-start; /* Align items to the left */
+    align-items: flex-start; /* Align items at the top */
+    gap: 20px; /* Space between elements */
+    margin-top: 20px;
+}
+
+.image-container, .analysis-container {
+    flex: 1;
+}
+
+/* Image styling */
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+/* Analysis section styling */
+.analysis-container {
+    text-align: left;
+    background: #f9f9f9;
+    padding: 15px;
+    border-radius: 5px;
+    border: 1px solid #ddd;
+}
+
+.analysis-result {
+    white-space: pre-wrap;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    color: #555;
+}

templates/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Image for Analysis</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <h1>Upload Image for Analysis</h1>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="messages">
+                    {% for message in messages %}
+                        <p class="alert">{{ message }}</p>
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endwith %}
+
+        {% if not uploaded_image %}
+            <form action="/" method="post" enctype="multipart/form-data">
+                <input type="file" name="image" accept="image/*" required>
+                <button type="submit">Upload</button>
+            </form>
+        {% else %}
+            <div class="result-container">
+                <div class="image-container">
+                    <h2>Uploaded Image:</h2>
+                    <img src="{{ url_for('static', filename='uploads/' ~ uploaded_image) }}" alt="Uploaded Image">
+                </div>
+                <div class="analysis-container">
+                    {% if not response %}
+                        <form action="/" method="post">
+                            <input type="hidden" name="uploaded_image" value="{{ uploaded_image }}">
+                            <button type="submit" name="analyze">Analyze</button>
+                        </form>
+                    {% else %}
+                        <h2>Analysis Result:</h2>
+                        <div class="analysis-result">
+                            {{ response | safe }}
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+</body>
+</html>