Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,324 @@
+# -*- coding: utf-8 -*-
+"""GradioWebsite.ipynb
+
+Automatically generated by Colab.
+
+Original file is located at
+    https://colab.research.google.com/drive/14D-sxTs35_Vc9__q6maqZ6cb8OqfhTqt
+"""
+
+from google.colab import drive
+drive.mount('/content/drive')
+
+!pip install huggingface_hub
+
+!pip install gradio
+import gradio as gr
+import torch
+import torch.nn.functional as F
+from transformers import AutoTokenizer
+from safetensors.torch import load_file
+import matplotlib.pyplot as plt
+import numpy as np
+import os
+
+!pip install safetensors transformers torch gradio
+
+from transformers import AutoModelForSequenceClassification, AutoTokenizer
+from safetensors.torch import load_file
+import torch
+
+# Define your model path
+model_path = "/content/drive/MyDrive/model_3500_data_pred_label_fold_5_dari_5(indoBERT_lite_large)/model.safetensors"
+
+# Load the model architecture (BERT-like, IndoBERT, etc.)
+model_name = "indobert-lite-large-p2"  # Replace with the correct model name for your case
+model = AutoModelForSequenceClassification.from_pretrained('indobenchmark/indobert-lite-large-p2', num_labels=3)
+
+# Load the model weights using safetensors
+weights = load_file(model_path)
+
+# Load the weights into the model
+model.load_state_dict(weights)
+
+# Set the model to evaluation mode
+model.eval()
+
+# Verify the model loaded correctly
+print(model)
+
+from transformers import AutoTokenizer
+from transformers import BertForSequenceClassification, BertTokenizer, AutoModelForSequenceClassification
+
+# Load the tokenizer
+tokenizer = BertTokenizer.from_pretrained('indobenchmark/indobert-lite-large-p2')
+
+import torch
+import torch.nn.functional as F
+import gradio as gr
+
+def predict_stress_with_accuracy(text_input):
+    if not text_input.strip():
+        return None, None, None, None
+
+    # Tokenize the input text
+    inputs = tokenizer(text_input, return_tensors="pt", padding=True, truncation=True, max_length=512)
+
+    # Get the model's output
+    with torch.no_grad():
+        output = model(**inputs)
+
+    # Apply softmax to get probabilities
+    probabilities = F.softmax(output.logits, dim=1)
+
+    # Get predictions for all classes
+    probs = probabilities[0].tolist()
+    confidence_scores = [round(p * 100, 1) for p in probs]
+
+    # Get main prediction
+    predicted_class = torch.argmax(probabilities, dim=1).item()
+    main_confidence = confidence_scores[predicted_class]
+
+    # Map the predicted class to stress level
+    stress_levels = {0: "Neutral", 1: "Mild Stress", 2: "Very Stress"}
+    prediction = stress_levels[predicted_class]
+
+    # Generate HTML for the main result
+    result_html = f"""
+        <div class="result-card">
+            <div class="prediction-text">{prediction}</div>
+            <div class="confidence-bar-container">
+                <div class="confidence-bar" style="width: {main_confidence}%"></div>
+                <span class="confidence-text">{main_confidence}% Confident</span>
+            </div>
+        </div>
+    """
+
+    # Generate HTML for detailed analysis
+    detailed_html = f"""
+        <div class="detailed-analysis">
+            <div class="analysis-title">Detailed Analysis</div>
+            <div class="analysis-bars">
+                <div class="analysis-bar">
+                    <div class="bar-label">Neutral</div>
+                    <div class="bar-container">
+                        <div class="bar neutral" style="width: {confidence_scores[0]}%"></div>
+                        <span class="bar-value">{confidence_scores[0]}%</span>
+                    </div>
+                </div>
+                <div class="analysis-bar">
+                    <div class="bar-label">Mild Stress</div>
+                    <div class="bar-container">
+                        <div class="bar mild" style="width: {confidence_scores[1]}%"></div>
+                        <span class="bar-value">{confidence_scores[1]}%</span>
+                    </div>
+                </div>
+                <div class="analysis-bar">
+                    <div class="bar-label">Very Stress</div>
+                    <div class="bar-container">
+                        <div class="bar very" style="width: {confidence_scores[2]}%"></div>
+                        <span class="bar-value">{confidence_scores[2]}%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    """
+
+    return result_html, detailed_html, prediction, main_confidence
+
+# Create the interface
+with gr.Blocks(css="""
+    #component-0 {
+        max-width: 900px;
+        margin: auto;
+        padding: 0 20px;
+    }
+
+    .container {
+        background: linear-gradient(135deg, #1a1c29, #2d3748);
+        border-radius: 20px;
+        padding: 2rem;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    }
+
+    .header {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+
+    .title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        background: linear-gradient(45deg, #00c6ff, #0072ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 0.5rem;
+    }
+
+    .subtitle {
+        color: #a0aec0;
+        font-size: 1.1rem;
+    }
+
+    /* Input styles */
+    .input-container {
+        background: rgba(255,255,255,0.05);
+        border-radius: 15px;
+        padding: 1.5rem;
+        margin-bottom: 2rem;
+    }
+
+    textarea {
+        background: rgba(255,255,255,0.07) !important;
+        border: 2px solid rgba(255,255,255,0.1) !important;
+        border-radius: 12px !important;
+        color: white !important;
+        font-size: 1.1rem !important;
+        transition: all 0.3s ease !important;
+    }
+
+    textarea:focus {
+        border-color: #00c6ff !important;
+        box-shadow: 0 0 20px rgba(0,198,255,0.2) !important;
+    }
+
+    /* Result card styles */
+    .result-card {
+        background: rgba(255,255,255,0.07);
+        border-radius: 15px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        animation: fadeIn 0.5s ease-out;
+    }
+
+    .prediction-text {
+        font-size: 1.8rem;
+        font-weight: bold;
+        color: white;
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+
+    .confidence-bar-container {
+        background: rgba(255,255,255,0.1);
+        border-radius: 10px;
+        height: 20px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .confidence-bar {
+        background: linear-gradient(90deg, #00c6ff, #0072ff);
+        height: 100%;
+        border-radius: 10px;
+        transition: width 0.5s ease-out;
+    }
+
+    .confidence-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-weight: bold;
+        text-shadow: 0 0 10px rgba(0,0,0,0.5);
+    }
+
+    /* Detailed analysis styles */
+    .detailed-analysis {
+        background: rgba(255,255,255,0.07);
+        border-radius: 15px;
+        padding: 1.5rem;
+        animation: fadeIn 0.5s ease-out;
+    }
+
+    .analysis-title {
+        color: white;
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+
+    .analysis-bar {
+        margin-bottom: 1rem;
+    }
+
+    .bar-label {
+        color: #a0aec0;
+        margin-bottom: 0.5rem;
+    }
+
+    .bar-container {
+        background: rgba(255,255,255,0.1);
+        border-radius: 8px;
+        height: 15px;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .bar {
+        height: 100%;
+        transition: width 0.5s ease-out;
+    }
+
+    .bar.neutral { background: linear-gradient(90deg, #00f2c3, #0098f0); }
+    .bar.mild { background: linear-gradient(90deg, #ffd600, #ff9100); }
+    .bar.very { background: linear-gradient(90deg, #ff5724, #ff2d55); }
+
+    .bar-value {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: white;
+        font-size: 0.9rem;
+        font-weight: bold;
+    }
+
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+
+    @media (max-width: 768px) {
+        .container {
+            padding: 1rem;
+        }
+
+        .title {
+            font-size: 2rem;
+        }
+
+        .prediction-text {
+            font-size: 1.5rem;
+        }
+    }
+""") as iface:
+    gr.HTML("""
+        <div class="header">
+            <div class="title">Klasifikasi Tingkat Stress</div>
+            <div class="subtitle">Jelaskan keadaan emosi Anda dan biarkan AI menganalisis tingkat stres Anda</div>
+        </div>
+    """)
+
+    with gr.Column(elem_classes="container"):
+        text_input = gr.Textbox(
+            label="Describe Your Emotional State",
+            placeholder="Apa kabar hari ini?",
+            lines=4,
+            elem_classes="input-container"
+        )
+
+        result_html = gr.HTML()
+        detailed_html = gr.HTML()
+        prediction = gr.State()
+        confidence = gr.State()
+
+        text_input.change(
+            predict_stress_with_accuracy,
+            inputs=[text_input],
+            outputs=[result_html, detailed_html, prediction, confidence]
+        )
+
+iface.launch(share=True)