Update app.py

app.py

@@ -1,63 +1,16 @@
 import os
-import tarfile
 from paddleocr import PaddleOCR
 from PIL import Image
+import gradio as gr
 import requests
 import re
 from simple_salesforce import Salesforce
-import base64
+import pandas as pd
+import matplotlib.pyplot as plt
 from io import BytesIO
-from flask import Flask, request, jsonify, make_response
-from threading import Thread
+from fuzzywuzzy import process
 
-# Initialize Flask App for camera input
-app = Flask(__name__)
-
-# Salesforce credentials
-SALESFORCE_USERNAME = "venkatramana@sandbox.com"
-SALESFORCE_PASSWORD = "Venkat12345@"
-SALESFORCE_SECURITY_TOKEN = "GhcJJmjBEefdnukJoz4CAQlR"
-
-# Local model path (make sure this path is correct and accessible in your environment)
-LOCAL_MODEL_PATH = r"/home/user/paddleocr_model/en_PP-OCRv3_det_infer.tar"  # Change this path as per your environment
-MODEL_DIR = r"/home/user/paddleocr_model/en_PP-OCRv3_det_infer"  # Change this path as per your environment
-
-# Initialize PaddleOCR with model directory check
-ocr = None
-
-def initialize_ocr():
-    global ocr
-    if not os.path.exists(MODEL_DIR):
-        print(f"Model directory {MODEL_DIR} does not exist. Attempting to extract model...")
-        try:
-            # Extract model if not present
-            extract_model(LOCAL_MODEL_PATH, MODEL_DIR)
-        except Exception as e:
-            print(f"Failed to extract or load model: {str(e)}")
-            raise e
-    else:
-        print(f"Model found in {MODEL_DIR}. Initializing OCR.")
-    
-    # Initialize OCR with local model directory
-    ocr = PaddleOCR(use_angle_cls=True, lang='en', det_model_dir=MODEL_DIR)
-
-def extract_model(tar_path, dest_dir):
-    if not os.path.exists(dest_dir):
-        os.makedirs(dest_dir)
-    
-    # Extract the tar file
-    with tarfile.open(tar_path, "r:tar") as tar:
-        tar.extractall(path=dest_dir)
-    print(f"Model extracted to {dest_dir}")
-
-# Product names list
-PRODUCT_NAMES = [
-    "Centrifugal mono block pump", "SINGLE PHASE MOTOR STARTER", "EasyPact EZC 100",
-    "Openwell Submersible Pumpset", "Electric Motor", "Self Priming Pump",
-    # Add more products if needed
-]
-
-# Attribute mappings: readable names to Salesforce API names
+#📌 Attribute mappings: readable names to Salesforce API names
 ATTRIBUTE_MAPPING = {
     "Product name": "Productname__c",
     "Colour": "Colour__c",
@@ -80,35 +33,85 @@ ATTRIBUTE_MAPPING = {
     "Serialnumber": "Serialnumber__c",
     "HeadSize": "Headsize__c",
     "Deliverysize": "Deliverysize__c",
-    # Add more fields if needed
+    "Phase": "Phase__c",
+    "Size": "Size__c",
+    "MRP": "MRP__c",
+    "Usebefore": "Usebefore__c",
+    "Height": "Height__c",
+    "MaximumDischarge Flow": "Maximumdischargeflow__c",
+    "DischargeRange": "Dischargeflow__c",
+    "Assembledby": "Manufacturer__c",
+    "Manufacturedate": "Manufacturedate__c",
+    "Companyname": "Companyname__c",
+    "Customercarenumber": "Customercarenumber__c",
+    "SellerAddress": "Selleraddress__c",
+    "Selleremail": "Selleremail__c",
+    "GSTIN": "GSTIN__c",
+    "Totalamount": "Totalamount__c",
+    "Paymentstatus": "Paymentstatus__c",
+    "Paymentmethod": "Paymentstatus__c",
+    "Invoicedate": "Manufacturedate__c",
+    "Warranty": "Warranty__c",
+    "Brand": "Brand__c",
+    "Motorhorsepower": "Motorhorsepower__c",
+    "Power": "Power__c",
+    "Motorphase": "Motorphase__c",
+    "Enginetype": "Enginetype__c",
+    "Tankcapacity": "Tankcapacity__c",
+    "Head": "Head__c",
+    "Usage/Application": "Usage_Application__c",
+    "Volts": "volts__c",
+    "Hertz": "Hertz__c",
+    "Frame": "frame__c",
+    "Mounting": "Mounting__c",
+    "Tollfreenumber": "Tollfreenumber__c",
+    "Pipesize": "Pipesize__c",
+    "Manufacturer": "Manufacturer__c",
+    "Office": "Office__c",
+    "SRnumber": "SRnumber__c",
+    "TypeOfEndUse": "TypeOfEndUse__c",
+    "Model Name": "Model_Name_Number__c",
+    "coolingmethod": "coolingmethod__c"
 }
 
-# Function to process the image and extract text
-@app.route('/upload-image', methods=['POST'])
-def upload_image():
-    try:
-        data = request.get_json()
-        image_base64 = data.get('image')
-
-        if not image_base64:
-            return jsonify({"success": False, "message": "No image data received."})
-
-        # Decode base64 image
-        image_data = base64.b64decode(image_base64.split(",")[1])
-        image = Image.open(BytesIO(image_data))
-
-        # OCR Extraction
-        ocr_result = ocr.ocr(image)
-        extracted_text = "\n".join([line[1][0] for line in ocr_result[0]])
+# List of product names to match
+PRODUCT_NAMES = [
+    "Centrifugal mono block pump", "SINGLE PHASE MOTOR STARTER", "EasyPact EZC 100",
+    "Openwell Submersible Pumpset", "Electric Motor", "Self Priming Pump",
+    "Control panel for single phase submersible pumps", "MOTOR", "Submersible pump set",
+    "Fusion submersible pump set", "DCT", "Shock proof water proof", "CG COMMERCIAL MOTORS", "Fusion",
+    "control panel for single phase submerisible pumps",
+    "single phase digital starter dry run and timer panel", "5HP AV1 XL Kirloskar Pump",
+    "Phase stainless steel submersible pump", "Submersible pump", "WB15X",
+    "Vtype self priming pump", "SP SHINE DISC", "havells submersible pump",
+    "Havells open well Submersible pump", "Bertolini pump CK3 90pp",
+    "WPA 772 Water Pump Assy", "bertolini TTL triplex high pressure plunger pumps",
+    "Generic plunger high pressure pump", "Apple Normal, Banana",
+    "Cast Iron KSb centrifugal pump", "5.5kw Water Pump",
+    "KSB reliable i line centrifuged pumps", "Apple Normal, Orange, Banana",
+    "Positive API 6745 hydraulic diaphragm pump", "1/2 inch Fuel Hose Pipe", "Kirloskar Water Pump",
+    "Rotodel motor pump", "PVC Electrical Insulation Materials",
+    "Electric kirloskar domestic water pump", "Electrical Insulation Materials",
+    "sellowell motor pump", "bhupathi submersible pump set",
+    "Flowshine Submersible pump set", "Index submersible pump",
+    "Wintoss Plastic Electric Switch Board", "Electric 18 watt ujagar cooler pump",
+    "Generator Service", "LG WM FHT1207ZWL, LG REF GL-S292RSCY",
+    "Water tank, Filters, Water Pump", "MS Control Submersible Panel",
+    "Centrifugal Monoblock Pumps", "Electric Motor with Pump BodyBlue and White",
+    "Various Repair and Maintenance Parts", "Earthmax Pump",
+    "Water Tank, Filters, Water Pump", "Centrifugal Water Pump for Agriculture",
+    "mono block pumps"
+]
 
-        if not extracted_text:
-            return jsonify({"success": False, "message": "No text extracted from the image."})
+#📌 Salesforce credentials
+SALESFORCE_USERNAME = "venkatramana@sandbox.com"
+SALESFORCE_PASSWORD = "Venkat12345@"
+SALESFORCE_SECURITY_TOKEN = "GhcJJmjBEefdnukJoz4CAQlR"
 
-        return jsonify({"success": True, "result": extracted_text})
-    except Exception as e:
-        return jsonify({"success": False, "message": str(e)})
+#🧠 Initialize PaddleOCR
+ocr = PaddleOCR(use_angle_cls=True, lang='en')
 
-# Helper functions for OCR and Salesforce interaction
+# Function to extract text using PaddleOCR
 def extract_text(image):
     result = ocr.ocr(image)
     extracted_text = []
@@ -116,25 +119,36 @@ def extract_text(image):
         extracted_text.append(line[1][0])
     return "\n".join(extracted_text)
 
+# Function to match product name using fuzzy matching
 def match_product_name(extracted_text):
     best_match = None
     best_score = 0
+
     for line in extracted_text.split("\n"):
         match, score = process.extractOne(line, PRODUCT_NAMES)
         if score > best_score:
             best_match = match
             best_score = score
-    return best_match if best_score >= 70 else None
 
+    return best_match if best_score >= 70 else None  # Threshold of 70 for a match
+
+# Function to extract attributes and their values
 def extract_attributes(extracted_text):
     attributes = {}
+
     for readable_attr, sf_attr in ATTRIBUTE_MAPPING.items():
         pattern = rf"{re.escape(readable_attr)}[:\-]?\s*(.+)"
         match = re.search(pattern, extracted_text, re.IGNORECASE)
         if match:
             attributes[readable_attr] = match.group(1).strip()
+
     return attributes
 
+# Function to filter attributes for valid Salesforce fields
+def filter_valid_attributes(attributes, valid_fields):
+    return {ATTRIBUTE_MAPPING[key]: value for key, value in attributes.items() if ATTRIBUTE_MAPPING[key] in valid_fields}
+
+#📊  Function to interact with Salesforce based on mode and type
 def interact_with_salesforce(mode, entry_type, quantity, extracted_text):
     try:
         sf = Salesforce(
@@ -143,104 +157,405 @@ def interact_with_salesforce(mode, entry_type, quantity, extracted_text):
             security_token=SALESFORCE_SECURITY_TOKEN
         )
 
-        # Map extracted attributes to Salesforce fields
-        attributes = extract_attributes(extracted_text)
-        product_name = match_product_name(extracted_text)
-        if product_name:
-            attributes["Product name"] = product_name
+        # Mapping mode and entry_type to Salesforce object and field
+        object_name = None
+        field_name = None
+        product_field_name = "Product_Name__c"  # Correct field for product name in the object
+        model_field_name = "Modal_Name__c"  # Correct field for model name in the object
 
         if mode == "Entry":
-            # Example: Create a new record in Salesforce
-            response = sf.CustomObject__c.create({
-                "Name": attributes.get("Product name", "Unknown Product"),
-                "Quantity__c": quantity,
-                **{ATTRIBUTE_MAPPING[k]: v for k, v in attributes.items() if k in ATTRIBUTE_MAPPING}
-            })
-            return f"Record created with ID: {response['id']}"
+            if entry_type == "Sales":
+                object_name = "VENKATA_RAMANA_MOTORS__c"
+                field_name = "Quantity__c"
+            elif entry_type == "Non-Sales":
+                object_name = "UNBILLING_DATA__c"
+                field_name = "TotalQuantity__c"
         elif mode == "Exit":
-            return "Exit mode not yet implemented."
+            if entry_type == "Sales":
+                object_name = "Inventory_Management__c"
+                product_field_name = "Product_Name__c"
+                model_field_name = "Modal_Name__c"
+                field_name = "Quantity_Sold__c"
+            elif entry_type == "Non-Sales":
+                object_name = "Un_Billable__c"
+                product_field_name = "Product_Name__c"
+                model_field_name = "Model_Name__c"
+                field_name = "Sold_Out__c"
+
+        if not object_name or not field_name:
+            return "Invalid mode or entry type."
+
+        # Get valid fields for the specified Salesforce object
+        sf_object = sf.__getattr__(object_name)
+        schema = sf_object.describe()
+        valid_fields = {field["name"] for field in schema["fields"]}
+
+        # Extract product name or model number
+        product_name = match_product_name(extracted_text)
+        attributes = extract_attributes(extracted_text)
+
+        if not product_name:
+            return "Product name could not be matched from the extracted text."
+
+        attributes["Product name"] = product_name
+
+        if mode == "Exit":
+            query = f"SELECT Id, {field_name} FROM {object_name} WHERE {product_field_name} = '{product_name}' OR {model_field_name} = '{attributes.get('Model Name', '')}' LIMIT 1"
+            response = sf.query(query)
+
+            if response["records"]:
+                record_id = response["records"][0]["Id"]
+                updated_quantity = quantity  # Overwrite the quantity, don't add
+                sf_object.update(record_id, {field_name: updated_quantity})
+                return f"Updated record for product '{product_name}' in {object_name}. New {field_name}: {updated_quantity}."
+            else:
+                return f"No matching record found for product '{product_name}' in {object_name}."
         else:
-            return "Invalid mode."
+            filtered_attributes = filter_valid_attributes(attributes, valid_fields)
+            filtered_attributes[field_name] = quantity
+            sf_object.create(filtered_attributes)
+            return f"✅ Data successfully exported to Salesforce object {object_name}."
+
+    except Exception as e:
+        return f"❌ Error interacting with Salesforce: {str(e)}"
+
+# Function to pull data from Salesforce MotorDataAPI
+def pull_data_from_motor_api():
+    try:
+        sf = Salesforce(
+            username=SALESFORCE_USERNAME,
+            password=SALESFORCE_PASSWORD,
+            security_token=SALESFORCE_SECURITY_TOKEN
+        )
+        motor_data = sf.apexecute("MotorDataAPI/", method="GET")
+        return motor_data  # API returns the list of records
+    except Exception as e:
+        return f"Error pulling data from MotorDataAPI: {str(e)}"
+
+# Function to format Salesforce data into a DataFrame with readable headers
+def format_salesforce_data():
+    try:
+        data = pull_data_from_motor_api()
+        if isinstance(data, list):
+            df = pd.DataFrame(data)
+            df = df.rename(columns={
+                "Product_Name__c": "Product Name",
+                "Modal_Name__c": "Model Name",
+                "Current_Stocks__c": "Current Stocks"
+            })
+            # Remove unnecessary columns
+            df = df[["Product Name", "Model Name", "Current Stocks"]]
+            return df
+        else:
+            return None
+    except Exception as e:
+        return None
+
+# Function to generate a bar graph from Salesforce data
+def generate_bar_graph(df):
+    try:
+        fig, ax = plt.subplots(figsize=(12, 8))
+        df.plot(kind='bar', x="Product Name", y="Current Stocks", ax=ax, legend=False)
+        ax.set_title("Stock Distribution by Product Name")
+        ax.set_xlabel("Product Name")
+        ax.set_ylabel("Current Stocks")
+        plt.xticks(rotation=45, ha="right", fontsize=10)
+        plt.tight_layout()
+        buffer = BytesIO()
+        plt.savefig(buffer, format="png")
+        buffer.seek(0)
+        img = Image.open(buffer)
+        return img
     except Exception as e:
-        return f"Error interacting with Salesforce: {str(e)}"
-
-# JavaScript function to capture image
-@app.route('/')
-def serve_html():
-    return make_response("""
-    <html>
-    <head>
-        <title>Camera Capture for OCR</title>
-        <style>
-            #rear-camera {
-                transform: scaleX(-1); /* Flip the video horizontally */
+        return None
+
+# Unified function to handle image processing and Salesforce interaction
+def process_image(image, mode, entry_type, quantity):
+    extracted_text = extract_text(image)
+    if not extracted_text:
+        return "No text detected in the image.", None
+
+    product_name = match_product_name(extracted_text)
+    attributes = extract_attributes(extracted_text)
+    if product_name:
+        attributes["Product name"] = product_name
+
+    # Interact with Salesforce
+    message = interact_with_salesforce(mode, entry_type, quantity, extracted_text)
+
+    numbered_output = "\n".join([f"{key}: {value}" for key, value in attributes.items()])
+    return f"Extracted Text:\n{extracted_text}\n\nAttributes and Values:\n{numbered_output}", message
+
+
+import gradio as gr
+import numpy as np
+from PIL import Image
+
+# Function to fetch and return Salesforce data
+def generate_salesforce_data():
+    df = format_salesforce_data()
+    if df is not None:
+        table_component = df.to_html(index=False)
+        bar_graph_image = generate_bar_graph(df)
+        return table_component, bar_graph_image
+    return "<p>No Data Available</p>", None
+
+def app():
+    with gr.Blocks(css="""
+        /* General Styling */
+        .gradio-container { 
+            background: #0b0f29; /* Deep Dark Blue */
+            font-family: 'Poppins', sans-serif;
+            color: white;
+            padding: 10px;
+        }
+
+        h1, h2, h3 {
+            text-align: center;
+            color: white;
+            font-weight: bold;
+            text-shadow: 0px 0px 10px rgba(255,255,255,0.8);
+        }
+
+        /* Cards & Elements */
+        .card {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 20px;
+            width: 100%;
+            max-width: 900px; /* Prevents extra-wide tables */
+            margin: auto; /* Centers the table */
+            box-shadow: 0px 0px 25px rgba(0, 255, 255, 0.6);
+            transition: 0.3s;
+        }
+
+        .card:hover {
+            box-shadow: 0px 0px 30px rgba(0, 255, 255, 0.9);
+        }
+
+        /* Buttons */
+        .gradio-button {
+            background: linear-gradient(to right, #ff416c, #ff4b2b);
+            color: white !important;
+            border-radius: 10px !important;
+            font-weight: bold;
+            padding: 12px;
+            transition: all 0.3s ease-in-out;
+            box-shadow: 0px 0px 20px rgba(255, 0, 255, 0.6);
+        }
+
+        .gradio-button:hover {
+            background: linear-gradient(to right, #ff4b2b, #ff416c);
+            box-shadow: 0px 0px 30px rgba(255, 0, 255, 0.9);
+        }
+
+        /* Tabs */
+        .gradio-tab {
+            font-size: 16px;
+            color: white;
+            font-weight: bold;
+            text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
+        }
+
+        /* Scrollable Table */
+        .table-container {
+            width: 100%;
+            max-width: 900px;
+            max-height: 400px; /* Controls table height */
+            overflow-y: auto; /* Enables vertical scrolling */
+            overflow-x: auto; /* Enables horizontal scrolling if needed */
+            display: flex;
+            justify-content: center;
+            margin: auto;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            min-width: 600px;
+        }
+
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            font-size: 14px;
+        }
+
+        th {
+            background: rgba(0, 255, 255, 0.2);
+        }
+
+        /* Mobile View */
+        @media (max-width: 768px) {
+            .gradio-container {
+                padding: 10px;
+            }
+
+            .card {
+                width: 100%;
+                max-width: 100%;
+                padding: 10px;
+            }
+
+            .table-container {
+                max-height: 350px; /* Adjusts for mobile */
+                overflow-y: scroll; /* Ensures vertical scrolling */
+            }
+
+            table {
+                width: 100%;
+                min-width: 100%;
+            }
+
+            th, td {
+                font-size: 12px;
+                padding: 8px;
             }
-        </style>
-    </head>
-    <body>
-        <h1>Camera Input</h1>
-        <video id="rear-camera" autoplay></video>
-        <button id="capture-btn">Capture</button>
-        <canvas id="camera-canvas" style="display:none;"></canvas>
-        <p id="status">Status: Ready</p>
-
-        <script>
-            const statusElement = document.getElementById("status");
-            navigator.mediaDevices.getUserMedia({
-                video: { facingMode: { exact: "environment" } } // Ensure the back camera is used
-            }).then(stream => {
-                const videoElement = document.getElementById("rear-camera");
-                videoElement.srcObject = stream;
-
-                const captureBtn = document.getElementById("capture-btn");
-                const canvas = document.getElementById("camera-canvas");
-                const ctx = canvas.getContext("2d");
-
-                captureBtn.addEventListener("click", () => {
-                    statusElement.innerText = "Status: Capturing...";
-                    canvas.width = videoElement.videoWidth;
-                    canvas.height = videoElement.videoHeight;
-
-                    // Flip the canvas horizontally for correct orientation
-                    ctx.save();
-                    ctx.translate(canvas.width, 0);
-                    ctx.scale(-1, 1); // This flips the image horizontally
-                    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-                    ctx.restore();
-
-                    const imageData = canvas.toDataURL("image/png");
-                    fetch("/upload-image", {
-                        method: "POST",
-                        body: JSON.stringify({ image: imageData }),
-                        headers: { "Content-Type": "application/json" }
-                    }).then(response => response.json()).then(data => {
-                        if (data.success) {
-                            statusElement.innerText = "Status: Image scanned successfully!";
-                            console.log("OCR Result:", data.result);
-                        } else {
-                            statusElement.innerText = "Status: Error in processing image.";
-                            console.error("Error:", data.message);
-                        }
-                    }).catch(err => {
-                        statusElement.innerText = "Status: Failed to upload image.";
-                        console.error("Error uploading image:", err);
-                    });
-                });
-            }).catch(error => {
-                console.error("Error accessing the rear camera:", error);
-                alert("Unable to access the rear camera. Please check permissions.");
-            });
-        </script>
-    </body>
-    </html>
-    """)
+        }
+
+    """) as interface:
+
+        gr.Markdown("<h1>🏢 VENKATARAMANA MOTORS</h1>")
+
+        with gr.Tab("📥 Stock Entry & Processing"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("<h3>📌 Upload & Process</h3>")
+                    image_input = gr.Image(type="numpy", label="📄 Upload Image", elem_classes="card")
+                    mode_dropdown = gr.Dropdown(label="📌 Mode", choices=["Entry", "Exit"], value="Entry", elem_classes="card")
+                    entry_type_radio = gr.Radio(label="📦 Entry Type", choices=["Sales", "Non-Sales"], value="Sales", elem_classes="card")
+                    quantity_input = gr.Number(label="🔢 Quantity", value=1, interactive=True, elem_classes="card")
+
+                with gr.Column():
+                    gr.Markdown("<h3>📊 Processed Data</h3>")
+                    image_view = gr.Text(label="📜 Image Data Viewer", interactive=False, elem_classes="card")
+                    result_output = gr.Text(label="📝 Processed Result", interactive=False, elem_classes="card")
+                    submit_button = gr.Button("🔍 Process Image", elem_id="process-btn", elem_classes="gradio-button")
+
+        with gr.Tab("📊 Salesforce Data Overview"):
+            gr.Markdown("<h3>📑 Stock Table</h3>")
+            with gr.Row(elem_classes="table-container"):
+                salesforce_table = gr.HTML(label="📦 Salesforce Data Table", elem_classes="card")
+
+            gr.Markdown("<h3>📈 Inventory Analytics</h3>")
+            with gr.Row():
+                salesforce_graph = gr.Image(type="pil", label="📉 Stock Distribution Bar Graph", elem_classes="card")
+
+            generate_button = gr.Button("⚡ Generate Data", elem_classes="gradio-button")
+
+        # Clicking "Generate Data" fetches table & graph
+        generate_button.click(fn=generate_salesforce_data, inputs=[], outputs=[salesforce_table, salesforce_graph])
+
+        submit_button.click(fn=process_image, inputs=[image_input, mode_dropdown, entry_type_radio, quantity_input], outputs=[image_view, result_output])
+
+        return interface
+
+interface = app()
+interface.launch()
+css = """
+    body {
+        background: linear-gradient(135deg, #282c34, #4b79a1);
+        font-family: 'Poppins', sans-serif;
+    }
+
+    .gradio-container {
+        border-radius: 20px;
+        padding: 30px;
+        background: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        box-shadow: 0px 8px 30px rgba(0, 123, 255, 0.4);
+        border: 2px solid rgba(255, 255, 255, 0.4);
+    }
+
+    .gradio-title {
+        font-size: 48px;
+        font-weight: bold;
+        text-align: center;
+        background: linear-gradient(90deg, #ff7eb3, #ff758c);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-shadow: 5px 5px 20px rgba(255, 105, 180, 0.6);
+        margin-bottom: 20px;
+        animation: glow 2s infinite alternate;
+    }
+
+    @keyframes glow {
+        from {
+            text-shadow: 5px 5px 30px rgba(255, 87, 134, 0.6);
+        }
+        to {
+            text-shadow: 6px 6px 40px rgba(255, 54, 90, 1);
+        }
+    }
+
+    .gradio-box {
+        border-radius: 15px;
+        padding: 25px;
+        background: linear-gradient(135deg, #6a11cb, #2575fc);
+        box-shadow: 0px 6px 25px rgba(30, 144, 255, 0.6);
+        border: 2px solid #6a5acd;
+        color: white;
+        font-size: 18px;
+    }
+
+    .gradio-button {
+        border-radius: 12px;
+        padding: 18px 36px;
+        font-size: 20px;
+        font-weight: bold;
+        color: #fff;
+        background: linear-gradient(135deg, #1e90ff, #00bfff);
+        box-shadow: 0px 6px 25px rgba(0, 191, 255, 0.6);
+        transition: all 0.3s ease-in-out;
+    }
+
+    .gradio-button:hover {
+        background: linear-gradient(135deg, #00bfff, #1e90ff);
+        box-shadow: 0px 10px 35px rgba(0, 191, 255, 0.9);
+        transform: scale(1.1);
+    }
+
+    .gradio-input {
+        border-radius: 10px;
+        padding: 16px;
+        font-size: 18px;
+        background: rgba(255, 255, 255, 0.3);
+        border: 2px solid rgba(0, 123, 255, 0.5);
+        color: #fff;
+        transition: 0.3s;
+    }
+
+    .gradio-input:focus {
+        border: 2px solid #1e90ff;
+        outline: none;
+        box-shadow: 0px 5px 20px rgba(30, 144, 255, 0.6);
+    }
+
+    .gradio-output {
+        background: linear-gradient(135deg, #f39c12, #e74c3c);
+        padding: 22px;
+        border-radius: 15px;
+        color: white;
+        font-size: 20px;
+        text-align: center;
+        border: 2px solid #f39c12;
+    }
+
+    .gradio-file {
+        background: linear-gradient(135deg, #8e44ad, #3498db);
+        color: white;
+        padding: 16px;
+        border-radius: 15px;
+        text-align: center;
+        font-size: 18px;
+    }
+"""
+
+
+
 
 if __name__ == "__main__":
-    # Run Flask and handle both Flask API and Camera Interface
-    def run_flask():
-        # Initialize the OCR model before starting the server
-        initialize_ocr()
-        app.run(debug=True, port=5000)
-
-    flask_thread = Thread(target=run_flask)
-    flask_thread.start()
+    app().launch(share=True)