Update app.py

app.py

@@ -236,7 +236,7 @@ def pull_data_from_motor_api():
 def format_salesforce_data():
     try:
         data = pull_data_from_motor_api()
-        if isinstance(data, list) and len(data) > 0:
+        if isinstance(data, list):
             df = pd.DataFrame(data)
             df = df.rename(columns={
                 "Product_Name__c": "Product Name",
@@ -247,49 +247,27 @@ def format_salesforce_data():
             df = df[["Product Name", "Model Name", "Current Stocks"]]
             return df
         else:
-            print("No data or empty list returned from API.")
             return None
     except Exception as e:
-        print(f"Error fetching data: {e}")
         return None
 
-# Function to generate a dynamic bar graph
-def generate_dynamic_bar_graph(df, x_column, y_column):
+# Function to generate a bar graph from Salesforce data
+def generate_bar_graph(df):
     try:
-        if x_column not in df.columns or y_column not in df.columns:
-            return "Error: Specified columns not found in the DataFrame."
-
-        # Create a bar graph with simple visualization
-        fig, ax = plt.subplots(figsize=(10, 6))
-        ax.bar(df[x_column], df[y_column], color='royalblue', edgecolor='black')
-        ax.set_title(f"{y_column} by {x_column}", fontsize=14, fontweight='bold')
-        ax.set_xlabel(x_column, fontsize=12)
-        ax.set_ylabel(y_column, fontsize=12)
-        plt.xticks(rotation=30, ha="right", fontsize=10)
-        plt.grid(axis='y', linestyle='--', alpha=0.7)
+        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()
-
-        # Save and return image
         buffer = BytesIO()
         plt.savefig(buffer, format="png")
         buffer.seek(0)
-        return Image.open(buffer)
+        img = Image.open(buffer)
+        return img
     except Exception as e:
-        return f"Error generating graph: {e}"
-
-# Function to fetch Salesforce data and return table and graph
-def generate_salesforce_data():
-    df = pd.DataFrame({
-        "Category": ["A", "B", "C", "D"],
-        "Stock": [150, 200, 100, 80]
-    })  # Simulated data; replace with real Salesforce data
-
-    if df is not None:
-        table_component = df.to_html(index=False)
-        bar_graph_image = generate_dynamic_bar_graph(df, "Category", "Stock")
-        return table_component, bar_graph_image
-    return "<p>No Data Available</p>", None
-
+        return None
 
 # Unified function to handle image processing and Salesforce interaction
 def process_image(image, mode, entry_type, quantity):
@@ -308,172 +286,147 @@ def process_image(image, mode, entry_type, quantity):
     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():
+# Gradio Interface
+def app():
     df = format_salesforce_data()
+    table_component = None
+    bar_graph_component = None
+
     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);
+        if bar_graph_image:
+            bar_graph_component = bar_graph_image
+
+    return gr.TabbedInterface([
+        gr.Interface(
+            fn=process_image,
+            inputs=[
+                gr.Image(type="numpy", label="📄ᴜᴘʟᴏᴀᴅ ɪᴍᴀɢᴇ"),
+                gr.Dropdown(label="📌Mode", choices=["ᴇɴᴛʀʏ", "ᴇxɪᴛ"], value="Entry"),
+                gr.Radio(label="📦Entry Type", choices=["Sales", "Non-Sales"], value="Sales"),
+                gr.Number(label="🔢Quantity", value=1, interactive=True),
+            ],
+            outputs=[
+                gr.Text(label="ɪᴍᴀɢᴇ ᴅᴀᴛᴀ ᴠɪᴇᴡᴇʀ"),
+                gr.Text(label="📝ＲＥＳＵＬＴ")
+            ],
+            title="𝑽𝑬𝑵𝑲𝑨𝑻𝑨𝑹𝑨𝑴𝑨𝑵𝑨 𝑴𝑶𝑻𝑶𝑹𝑺",
+            description="📦𝐈𝐍𝐕𝐄𝐍𝐓𝐎𝐑𝐘 𝐌𝐀𝐍𝐀𝐆𝐄𝐌𝐄𝐍𝐓"
+        ),
+        gr.Interface(
+            fn=lambda: (table_component, bar_graph_component),
+            inputs=[],
+            outputs=[
+                gr.HTML(label="Salesforce Data Table"),
+                gr.Image(type="pil", label="Stock Distribution Bar Graph")
+            ],
+            title="Salesforce Data",
+            description="View structured Salesforce data as a table and bar graph."
+        )
+    ], ["Processing", "Salesforce Data"])
+    # 🎨 Bright and Gradient UI with Updated Coloring
+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);
         }
-
-        /* 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;
-            }
+        to {
+            text-shadow: 6px 6px 40px rgba(255, 54, 90, 1);
         }
-
-    """) 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() 
+    }
+
+    .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__":
+    app().launch(share=True)