Migrate frontend to React.js with premium dark UI

.gitignore

@@ -8,3 +8,5 @@ static/uploads/*
 pip_list.txt
 *.mp3
 dataset/
+frontend/node_modules/
+frontend/dist/

app.py

@@ -1,4 +1,5 @@
-from flask import Flask, render_template, request
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
 from werkzeug.utils import secure_filename
 import os
 import numpy as np
@@ -14,11 +15,12 @@ try:
 except ImportError:
     load_model = None
 
-app = Flask(__name__)
+app = Flask(__name__, static_folder='static')
+CORS(app)  # Enable CORS for React frontend
 app.config['UPLOAD_FOLDER'] = 'static/uploads'
 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
-# Dataset paths (Colab format - update these for local use)
+# Dataset paths
 TRAIN_DIR = "/content/drive/MyDrive/AML-F24/Code/image_datset/image_datset/train"
 TEST_DIR = "/content/drive/MyDrive/AML-F24/Code/image_datset/image_datset/test"
 
@@ -32,13 +34,13 @@ translator = loader.translator_pipeline
 stt_model = loader.stt_pipeline
 zsl_model = loader.zsl_pipeline
 gender_classifier = loader.gender_classifier
-gender_model = loader.cnn_model # Custom CNN
+gender_model = loader.cnn_model
 
 # Clustering Dependencies
 import pandas as pd
 from sklearn.cluster import KMeans, DBSCAN
 import matplotlib
-matplotlib.use('Agg') # Non-interactive backend
+matplotlib.use('Agg')
 import matplotlib.pyplot as plt
 import io
 import base64
@@ -48,402 +50,358 @@ from sklearn.preprocessing import StandardScaler
 from mlxtend.frequent_patterns import apriori, association_rules
 from mlxtend.preprocessing import TransactionEncoder
 
-# ---------------- ROUTES ---------------- #
+# ============================================================
+#                       API ROUTES
+# ============================================================
 
-@app.route('/')
-def index():
-    return render_template('index.html')
+@app.route('/api/health', methods=['GET'])
+def health():
+    return jsonify({"status": "ok"})
 
 # -------- GENDER CLASSIFICATION -------- #
-@app.route('/gender', methods=['GET', 'POST'])
+@app.route('/api/gender', methods=['POST'])
 def gender():
-    result = ""
-    if request.method == 'POST':
-        if 'image' not in request.files:
-            return render_template('gender.html', result="No image uploaded")
-        
-        file = request.files['image']
-        if file.filename == '':
-            return render_template('gender.html', result="No image selected")
-
-        if file:
-            # Save file temporarily (use secure filename)
-            filename = secure_filename(file.filename)
-            filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            file.save(filepath)
-
-            if gender_classifier:
-                try:
-                    img = Image.open(filepath)
-                    results = gender_classifier(img)
-                    # Extract the top result
-                    result = results[0]['label'].capitalize()
-                    print(f"Gender Classification Result: {result}")
-                except Exception as e:
-                    result = f"Error processing image with transformers: {e}"
-            elif gender_model:
-                try:
-                    img = Image.open(filepath).convert('RGB')
-                    img = img.resize((128, 128))
-                    img_array = np.array(img).astype(np.float32) / 255.0
-                    # Correct shape for PyTorch CNN: (batch, channels, height, width)
-                    img_tensor = torch.from_numpy(img_array).permute(2, 0, 1).unsqueeze(0)
-                    
-                    with torch.no_grad():
-                        prediction = gender_model(img_tensor)
-                    result = "Male" if prediction.item() > 0.5 else "Female"
-                except Exception as e:
-                    import traceback
-                    print(traceback.format_exc())
-                    result = f"Error processing image: {e}"
-            else:
-                result = "Gender model is not loaded (check console for details)."
-            
-    return render_template('gender.html', result=result)
+    if 'image' not in request.files:
+        return jsonify({"error": "No image uploaded"}), 400
+
+    file = request.files['image']
+    if file.filename == '':
+        return jsonify({"error": "No image selected"}), 400
+
+    filename = secure_filename(file.filename)
+    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    file.save(filepath)
+
+    if gender_classifier:
+        try:
+            img = Image.open(filepath)
+            results = gender_classifier(img)
+            result = results[0]['label'].capitalize()
+            return jsonify({"result": result})
+        except Exception as e:
+            return jsonify({"error": f"Error processing image: {e}"}), 500
+    elif gender_model:
+        try:
+            import torch
+            img = Image.open(filepath).convert('RGB')
+            img = img.resize((128, 128))
+            img_array = np.array(img).astype(np.float32) / 255.0
+            img_tensor = torch.from_numpy(img_array).permute(2, 0, 1).unsqueeze(0)
+            with torch.no_grad():
+                prediction = gender_model(img_tensor)
+            result = "Male" if prediction.item() > 0.5 else "Female"
+            return jsonify({"result": result})
+        except Exception as e:
+            return jsonify({"error": f"Error processing image: {e}"}), 500
+    else:
+        return jsonify({"error": "Gender model is not loaded"}), 500
 
 # -------- TEXT GENERATION -------- #
-@app.route('/textgen', methods=['GET', 'POST'])
+@app.route('/api/textgen', methods=['POST'])
 def textgen():
-    result = ""
-    if request.method == 'POST':
-        text = request.form['prompt']
-        if textgen_model:
-            result = textgen_model(text, max_length=50)[0]['generated_text']
-        else:
-            result = "Text generation model not available"
-    return render_template('textgen.html', generated_text=result)
+    data = request.get_json()
+    prompt = data.get('prompt', '')
+    if not prompt:
+        return jsonify({"error": "No prompt provided"}), 400
+    if textgen_model:
+        result = textgen_model(prompt, max_length=50)[0]['generated_text']
+        return jsonify({"generated_text": result})
+    return jsonify({"error": "Text generation model not available"}), 500
 
 # -------- TRANSLATION -------- #
-@app.route('/translate', methods=['GET', 'POST'])
+@app.route('/api/translate', methods=['POST'])
 def translate():
-    result = ""
-    if request.method == 'POST':
-        text = request.form.get('text', '')
-        if translator:
-            result = translator(text)[0]['translation_text']
-        else:
-            result = "Translation model not available"
-    return render_template('translate.html', translated_text=result)
+    data = request.get_json()
+    text = data.get('text', '')
+    if not text:
+        return jsonify({"error": "No text provided"}), 400
+    if translator:
+        result = translator(text)[0]['translation_text']
+        return jsonify({"translated_text": result})
+    return jsonify({"error": "Translation model not available"}), 500
 
-# -------- SENTIMENT (VOICE) -------- #
-@app.route('/sentiment', methods=['GET', 'POST'])
+# -------- SENTIMENT ANALYSIS -------- #
+@app.route('/api/sentiment', methods=['POST'])
 def sentiment():
-    result = ""
-    if request.method == 'POST':
+    typed_text = ''
+    audio_file = request.files.get('voice')
+
+    if request.content_type and 'multipart/form-data' in request.content_type:
         typed_text = request.form.get('text', '').strip()
-        audio_file = request.files.get('voice')
-        
-        text = ""
-        if typed_text:
-            text = typed_text
-        elif audio_file:
-            if audio_file.filename == '':
-                return render_template('sentiment.html', result="No audio selected")
-            audio_filename = secure_filename(audio_file.filename)
-            audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
-            audio_file.save(audio_path)
-            
-            if stt_model is None:
-                return render_template('sentiment.html', result="STT model not available")
-            
-            try:
-                audio_array, sampling_rate = librosa.load(audio_path, sr=16000)
-                # Ensure the audio array is 1D and float32
-                audio_array = audio_array.astype(np.float32)
-                stt_result = stt_model(audio_array)
-                text = stt_result.get('text', '').strip()
-                if not text:
-                     return render_template('sentiment.html', result="Could not understand audio")
-            except Exception as e:
-                return render_template('sentiment.html', result=f"STT processing error: {str(e)}")
-        else:
-            return render_template('sentiment.html', result="No input provided")
+    else:
+        data = request.get_json(silent=True) or {}
+        typed_text = data.get('text', '').strip()
 
-        # Sentiment Analysis Logic
-        if sentiment_model is None:
-            result = f"Analyzed: {text} | Status: Sentiment model not available"
-        else:
-            try:
-                sentiment_data = sentiment_model(text)[0]
-                label = sentiment_data.get('label', 'Unknown').capitalize()
-                score = round(sentiment_data.get('score', 0) * 100, 1)
-                
-                # Question Detection
-                questions_words = ["who", "what", "where", "when", "why", "how", "is", "are", "do", "does", "can", "could", "would", "should"]
-                is_question = text.strip().endswith("?") or any(text.lower().startswith(q + " ") for q in questions_words)
-                
-                type_str = "Question" if is_question else "Statement"
-                result = f"Text: \"{text}\" | Type: {type_str} | Sentiment: {label} (Confidence: {score}%)"
-            except Exception as e:
-                result = f"Sentiment analysis failed: {str(e)}"
-                
-    return render_template('sentiment.html', result=result)
-
-# -------- QUESTION ANSWERING (VOICE → VOICE) -------- #
-@app.route('/qa', methods=['GET', 'POST'])
+    text = ""
+    transcript = ""
+    if typed_text:
+        text = typed_text
+    elif audio_file and audio_file.filename != '':
+        audio_filename = secure_filename(audio_file.filename)
+        audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
+        audio_file.save(audio_path)
+
+        if stt_model is None:
+            return jsonify({"error": "STT model not available"}), 500
+        try:
+            audio_array, sampling_rate = librosa.load(audio_path, sr=16000)
+            audio_array = audio_array.astype(np.float32)
+            stt_result = stt_model(audio_array)
+            text = stt_result.get('text', '').strip()
+            transcript = text
+            if not text:
+                return jsonify({"error": "Could not understand audio"}), 400
+        except Exception as e:
+            return jsonify({"error": f"STT processing error: {str(e)}"}), 500
+    else:
+        return jsonify({"error": "No input provided"}), 400
+
+    if sentiment_model is None:
+        return jsonify({"error": "Sentiment model not available"}), 500
+
+    try:
+        sentiment_data = sentiment_model(text)[0]
+        label = sentiment_data.get('label', 'Unknown').capitalize()
+        score = round(sentiment_data.get('score', 0) * 100, 1)
+        return jsonify({
+            "result": label,
+            "score": score,
+            "text": text,
+            "transcript": transcript
+        })
+    except Exception as e:
+        return jsonify({"error": f"Sentiment analysis failed: {str(e)}"}), 500
+
+# -------- QUESTION ANSWERING -------- #
+@app.route('/api/qa', methods=['POST'])
 def qa():
-    answer = ""
-    context = ""
-    question_text = ""
-    if request.method == 'POST':
+    context = ''
+    question_text = ''
+
+    if request.content_type and 'multipart/form-data' in request.content_type:
         context = request.form.get('context', '')
+        question_text = request.form.get('question', '').strip()
         audio_file = request.files.get('voice')
-        typed_question = request.form.get('question', '').strip()
-
-        if typed_question:
-            question_text = typed_question
-        elif audio_file:
-            if audio_file.filename != '':
-                audio_filename = secure_filename(audio_file.filename)
-                audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
-                audio_file.save(audio_path)
-                
-                try:
-                    audio_array, sampling_rate = librosa.load(audio_path, sr=16000)
-                    audio_array = audio_array.astype(np.float32)
-                    stt_result = stt_model(audio_array)
-                    question_text = stt_result.get('text', '').strip()
-                except Exception as e:
-                    print(f"STT Error in QA: {e}")
-                    answer = "Error processing your voice question."
-
-        if not answer and question_text and context:
-            if qa_model is None:
-                answer = "Question-answering model not available"
-            else:
-                try:
-                    result = qa_model(question=question_text, context=context)
-                    answer = result.get('answer', str(result))
-                    
-                    try:
-                        tts = gTTS(answer)
-                        tts.save(os.path.join('static', 'answer.mp3'))
-                    except Exception as e:
-                        print(f"TTS failed: {e}")
-                except Exception as e:
-                    answer = f"QA model error: {e}"
-        elif not answer:
-            answer = "Please provide both context and a question (typed or voice)."
-
-    return render_template('qa.html', answer=answer, context=context, question=question_text)
+    else:
+        data = request.get_json(silent=True) or {}
+        context = data.get('context', '')
+        question_text = data.get('question', '').strip()
+        audio_file = None
 
-# -------- ZERO-SHOT LEARNING -------- #
-@app.route('/zsl', methods=['GET', 'POST'])
-def zsl():
-    result = None
-    if request.method == 'POST':
-        text = request.form.get('text', '')
-        labels = request.form.get('labels', '')
-        
-        if not text or not labels:
-            return render_template('zsl.html', error="Both text and labels are required.")
-            
-        candidate_labels = [l.strip() for l in labels.split(',') if l.strip()]
-        
-        if zsl_model is None:
-            return render_template('zsl.html', error="ZSL model not available.")
-            
+    if not question_text and audio_file and audio_file.filename != '':
+        audio_filename = secure_filename(audio_file.filename)
+        audio_path = os.path.join(app.config['UPLOAD_FOLDER'], audio_filename)
+        audio_file.save(audio_path)
         try:
-            output = zsl_model(text, candidate_labels=candidate_labels)
-            # Find the index of the label with the highest score
-            best_idx = np.argmax(output['scores'])
-            result = {
-                'label': output['labels'][0], # BART-MNLI returns sorted
-                'score': round(output['scores'][0] * 100, 2),
-                'all_results': zip(output['labels'], [round(s * 100, 2) for s in output['scores']])
-            }
+            audio_array, sampling_rate = librosa.load(audio_path, sr=16000)
+            audio_array = audio_array.astype(np.float32)
+            stt_result = stt_model(audio_array)
+            question_text = stt_result.get('text', '').strip()
         except Exception as e:
-            return render_template('zsl.html', error=f"ZSL error: {str(e)}")
-            
-    return render_template('zsl.html', result=result)
+            return jsonify({"error": f"STT Error: {e}"}), 500
+
+    if not question_text or not context:
+        return jsonify({"error": "Both context and question are required"}), 400
+
+    if qa_model is None:
+        return jsonify({"error": "QA model not available"}), 500
+
+    try:
+        result = qa_model(question=question_text, context=context)
+        answer = result.get('answer', str(result))
+        score = round(result.get('score', 0) * 100, 1)
+
+        audio_url = None
+        try:
+            tts = gTTS(answer)
+            tts.save(os.path.join('static', 'answer.mp3'))
+            audio_url = '/static/answer.mp3'
+        except Exception:
+            pass
 
+        return jsonify({
+            "answer": answer,
+            "score": score,
+            "question": question_text,
+            "audio_url": audio_url
+        })
+    except Exception as e:
+        return jsonify({"error": f"QA model error: {e}"}), 500
+
+# -------- ZERO-SHOT LEARNING -------- #
+@app.route('/api/zsl', methods=['POST'])
+def zsl():
+    data = request.get_json()
+    text = data.get('text', '')
+    labels = data.get('labels', '')
+
+    if not text or not labels:
+        return jsonify({"error": "Both text and labels are required"}), 400
+
+    candidate_labels = [l.strip() for l in labels.split(',') if l.strip()]
+
+    if zsl_model is None:
+        return jsonify({"error": "ZSL model not available"}), 500
+
+    try:
+        output = zsl_model(text, candidate_labels=candidate_labels)
+        results = []
+        for label, score in zip(output['labels'], output['scores']):
+            results.append({"label": label, "score": round(score * 100, 2)})
+        return jsonify({"results": results, "best_label": output['labels'][0], "best_score": round(output['scores'][0] * 100, 2)})
+    except Exception as e:
+        return jsonify({"error": f"ZSL error: {str(e)}"}), 500
 
 # -------- K-MEANS CLUSTERING -------- #
-@app.route('/clustering', methods=['GET', 'POST'])
+@app.route('/api/clustering', methods=['POST'])
 def clustering():
-    plot_url = None
-    cluster_info = None
-    if request.method == 'POST':
-        if 'file' not in request.files:
-            return render_template('clustering.html', error="No file uploaded")
-            
-        file = request.files['file']
-        n_clusters = int(request.form.get('clusters', 3))
-        
-        if file.filename == '':
-            return render_template('clustering.html', error="No file selected")
-            
-        try:
-            if file.filename.endswith('.csv'):
-                df = pd.read_csv(file)
-            else:
-                df = pd.read_excel(file)
-                
-            # Keep only numeric columns
-            numeric_df = df.select_dtypes(include=[np.number])
-            
-            if numeric_df.shape[1] < 2:
-                return render_template('clustering.html', error="Dataset must have at least 2 numeric columns for clustering.")
-                
-            # Basic cleaning
-            numeric_df = numeric_df.dropna()
-            
-            # K-Means
-            kmeans = KMeans(n_clusters=n_clusters, random_state=42)
-            df['Cluster'] = kmeans.fit_predict(numeric_df)
-            
-            # Create Plot (using first two numeric columns)
-            plt.figure(figsize=(10, 6))
-            scatter = plt.scatter(numeric_df.iloc[:, 0], numeric_df.iloc[:, 1], c=df['Cluster'], cmap='viridis', alpha=0.6)
-            plt.colorbar(scatter, label='Cluster')
-            plt.title(f'K-Means Clustering (K={n_clusters})')
-            plt.xlabel(numeric_df.columns[0])
-            plt.ylabel(numeric_df.columns[1])
-            plt.grid(True, alpha=0.3)
-            
-            # Save plot to base64
-            img = io.BytesIO()
-            plt.savefig(img, format='png', bbox_inches='tight', transparent=True)
-            img.seek(0)
-            plot_url = base64.b64encode(img.getvalue()).decode()
-            plt.close()
-            
-            # Cluster stats
-            cluster_info = df.groupby('Cluster').size().to_dict()
-            
-        except Exception as e:
-            return render_template('clustering.html', error=f"Clustering error: {str(e)}")
-            
-    return render_template('clustering.html', plot_url=plot_url, cluster_info=cluster_info)
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+
+    file = request.files['file']
+    n_clusters = int(request.form.get('clusters', 3))
+
+    if file.filename == '':
+        return jsonify({"error": "No file selected"}), 400
+
+    try:
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(file)
+        else:
+            df = pd.read_excel(file)
+
+        numeric_df = df.select_dtypes(include=[np.number])
+        if numeric_df.shape[1] < 2:
+            return jsonify({"error": "Dataset must have at least 2 numeric columns"}), 400
+
+        numeric_df = numeric_df.dropna()
+        kmeans = KMeans(n_clusters=n_clusters, random_state=42)
+        df['Cluster'] = kmeans.fit_predict(numeric_df)
+
+        plt.figure(figsize=(10, 6))
+        scatter = plt.scatter(numeric_df.iloc[:, 0], numeric_df.iloc[:, 1], c=df['Cluster'], cmap='viridis', alpha=0.6)
+        plt.colorbar(scatter, label='Cluster')
+        plt.title(f'K-Means Clustering (K={n_clusters})')
+        plt.xlabel(numeric_df.columns[0])
+        plt.ylabel(numeric_df.columns[1])
+        plt.grid(True, alpha=0.3)
+
+        img = io.BytesIO()
+        plt.savefig(img, format='png', bbox_inches='tight', transparent=True)
+        img.seek(0)
+        plot_url = base64.b64encode(img.getvalue()).decode()
+        plt.close()
+
+        cluster_info = df.groupby('Cluster').size().to_dict()
+        return jsonify({"plot": plot_url, "cluster_info": cluster_info})
+    except Exception as e:
+        return jsonify({"error": f"Clustering error: {str(e)}"}), 500
 
 # -------- DBSCAN CLUSTERING -------- #
-@app.route('/dbscan', methods=['GET', 'POST'])
+@app.route('/api/dbscan', methods=['POST'])
 def dbscan():
-    plot_url = None
-    cluster_info = None
-    if request.method == 'POST':
-        if 'file' not in request.files:
-            return render_template('dbscan.html', error="No file uploaded")
-            
-        file = request.files['file']
-        eps = float(request.form.get('eps', 0.5))
-        min_samples = int(request.form.get('min_samples', 5))
-        
-        if file.filename == '':
-            return render_template('dbscan.html', error="No file selected")
-            
-        try:
-            if file.filename.endswith('.csv'):
-                df = pd.read_csv(file)
-            else:
-                df = pd.read_excel(file)
-                
-            # Keep only numeric columns
-            numeric_df = df.select_dtypes(include=[np.number])
-            
-            if numeric_df.shape[1] < 2:
-                return render_template('dbscan.html', error="Dataset must have at least 2 numeric columns for clustering.")
-                
-            # Basic cleaning
-            numeric_df = numeric_df.dropna()
-            
-            # DBSCAN with Scaling
-            scaler = StandardScaler()
-            scaled_data = scaler.fit_transform(numeric_df)
-            
-            dbscan_model = DBSCAN(eps=eps, min_samples=min_samples)
-            df['Cluster'] = dbscan_model.fit_predict(scaled_data)
-            
-            # Create Plot
-            plt.figure(figsize=(10, 6))
-            scatter = plt.scatter(numeric_df.iloc[:, 0], numeric_df.iloc[:, 1], c=df['Cluster'], cmap='viridis', alpha=0.6)
-            plt.colorbar(scatter, label='Cluster')
-            plt.title(f'DBSCAN Clustering (eps={eps}, min_samples={min_samples}) - Scaled')
-            plt.xlabel(numeric_df.columns[0])
-            plt.ylabel(numeric_df.columns[1])
-            plt.grid(True, alpha=0.3)
-            
-            # Save plot to base64
-            img = io.BytesIO()
-            plt.savefig(img, format='png', bbox_inches='tight', transparent=True)
-            img.seek(0)
-            plot_url = base64.b64encode(img.getvalue()).decode()
-            plt.close()
-            
-            # Cluster stats
-            cluster_info = df.groupby('Cluster').size().to_dict()
-            
-        except Exception as e:
-            return render_template('dbscan.html', error=f"DBSCAN error: {str(e)}")
-            
-    return render_template('dbscan.html', plot_url=plot_url, cluster_info=cluster_info)
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+
+    file = request.files['file']
+    eps = float(request.form.get('eps', 0.5))
+    min_samples = int(request.form.get('min_samples', 5))
+
+    if file.filename == '':
+        return jsonify({"error": "No file selected"}), 400
+
+    try:
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(file)
+        else:
+            df = pd.read_excel(file)
+
+        numeric_df = df.select_dtypes(include=[np.number])
+        if numeric_df.shape[1] < 2:
+            return jsonify({"error": "Dataset must have at least 2 numeric columns"}), 400
+
+        numeric_df = numeric_df.dropna()
+        scaler = StandardScaler()
+        scaled_data = scaler.fit_transform(numeric_df)
+
+        dbscan_model = DBSCAN(eps=eps, min_samples=min_samples)
+        df['Cluster'] = dbscan_model.fit_predict(scaled_data)
+
+        plt.figure(figsize=(10, 6))
+        scatter = plt.scatter(numeric_df.iloc[:, 0], numeric_df.iloc[:, 1], c=df['Cluster'], cmap='viridis', alpha=0.6)
+        plt.colorbar(scatter, label='Cluster')
+        plt.title(f'DBSCAN (eps={eps}, min_samples={min_samples})')
+        plt.xlabel(numeric_df.columns[0])
+        plt.ylabel(numeric_df.columns[1])
+        plt.grid(True, alpha=0.3)
+
+        img = io.BytesIO()
+        plt.savefig(img, format='png', bbox_inches='tight', transparent=True)
+        img.seek(0)
+        plot_url = base64.b64encode(img.getvalue()).decode()
+        plt.close()
+
+        cluster_info = df.groupby('Cluster').size().to_dict()
+        return jsonify({"plot": plot_url, "cluster_info": cluster_info})
+    except Exception as e:
+        return jsonify({"error": f"DBSCAN error: {str(e)}"}), 500
 
 # -------- A-PRIORI ASSOCIATION RULES -------- #
-@app.route('/apriori', methods=['GET', 'POST'])
+@app.route('/api/apriori', methods=['POST'])
 def apriori_route():
-    rules_html = None
-    if request.method == 'POST':
-        if 'file' not in request.files:
-            return render_template('apriori.html', error="No file uploaded")
-            
-        file = request.files['file']
-        min_support = float(request.form.get('min_support', 0.1))
-        min_threshold = float(request.form.get('min_threshold', 0.7))
-        metric = request.form.get('metric', 'lift')
-        has_header = request.form.get('has_header') == 'on'
-        
-        if file.filename == '':
-            return render_template('apriori.html', error="No file selected")
-            
-        try:
-            if file.filename.endswith('.csv'):
-                df = pd.read_csv(file, header=0 if has_header else None)
-            else:
-                df = pd.read_excel(file, header=0 if has_header else None)
-            
-            # Convert to list of lists (transactions) - Handle nulls and whitespace
-            transactions = []
-            values = df.values.tolist()
-            for row in values:
-                # Filter out nan, None, and empty strings, and convert everything to string
-                transaction = sorted(list(set([str(item).strip() for item in row if pd.notna(item) and str(item).strip() != ''])))
-                if transaction:
-                    transactions.append(transaction)
-            
-            if not transactions:
-                 return render_template('apriori.html', error="No valid transactions found in file.")
-
-            # Transaction Encoding
-            te = TransactionEncoder()
-            te_ary = te.fit(transactions).transform(transactions)
-            encoded_df = pd.DataFrame(te_ary, columns=te.columns_)
-            
-            # Generate Frequent Itemsets
-            frequent_itemsets = apriori(encoded_df, min_support=min_support, use_colnames=True)
-            
-            if frequent_itemsets.empty:
-                return render_template('apriori.html', error="No frequent itemsets found. Try lowering min support.")
-                
-            # Generate Rules
-            rules = association_rules(frequent_itemsets, metric=metric, min_threshold=min_threshold)
-            
-            if rules.empty:
-                return render_template('apriori.html', error=f"No rules found for {metric} >= {min_threshold}. Try lowering threshold.")
-            
-            # Format rules for display
-            rules['antecedents'] = rules['antecedents'].apply(lambda x: list(x))
-            rules['consequents'] = rules['consequents'].apply(lambda x: list(x))
-            
-            # Selection of columns for display
-            display_rules = rules[['antecedents', 'consequents', 'support', 'confidence', 'lift']]
-            rules_html = display_rules.to_dict(orient='records')
-            
-        except Exception as e:
-            import traceback
-            print(traceback.format_exc())
-            return render_template('apriori.html', error=f"A-priori error: {str(e)}")
-            
-    return render_template('apriori.html', rules=rules_html)
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+
+    file = request.files['file']
+    min_support = float(request.form.get('min_support', 0.1))
+    min_threshold = float(request.form.get('min_threshold', 0.7))
+    metric = request.form.get('metric', 'lift')
+    has_header = request.form.get('has_header') == 'true'
+
+    if file.filename == '':
+        return jsonify({"error": "No file selected"}), 400
+
+    try:
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(file, header=0 if has_header else None)
+        else:
+            df = pd.read_excel(file, header=0 if has_header else None)
+
+        transactions = []
+        values = df.values.tolist()
+        for row in values:
+            transaction = sorted(list(set([str(item).strip() for item in row if pd.notna(item) and str(item).strip() != ''])))
+            if transaction:
+                transactions.append(transaction)
+
+        if not transactions:
+            return jsonify({"error": "No valid transactions found"}), 400
+
+        te = TransactionEncoder()
+        te_ary = te.fit(transactions).transform(transactions)
+        encoded_df = pd.DataFrame(te_ary, columns=te.columns_)
+
+        frequent_itemsets = apriori(encoded_df, min_support=min_support, use_colnames=True)
+        if frequent_itemsets.empty:
+            return jsonify({"error": "No frequent itemsets found. Try lowering min support."}), 400
+
+        rules = association_rules(frequent_itemsets, metric=metric, min_threshold=min_threshold)
+        if rules.empty:
+            return jsonify({"error": f"No rules found for {metric} >= {min_threshold}. Try lowering threshold."}), 400
+
+        rules['antecedents'] = rules['antecedents'].apply(lambda x: list(x))
+        rules['consequents'] = rules['consequents'].apply(lambda x: list(x))
+
+        display_rules = rules[['antecedents', 'consequents', 'support', 'confidence', 'lift']]
+        rules_list = display_rules.to_dict(orient='records')
+
+        return jsonify({"rules": rules_list, "count": len(rules_list)})
+    except Exception as e:
+        import traceback
+        print(traceback.format_exc())
+        return jsonify({"error": f"A-priori error: {str(e)}"}), 500
+
 
 if __name__ == '__main__':
-    app.run(debug=True, use_reloader=False)
+    print("Initializing models...")
+    app.run(debug=True, use_reloader=False, port=5000)

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.13.5",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.575.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.2.1",
+    "vite": "^7.3.1"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,36 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Layout from './components/Layout';
+import Dashboard from './pages/Dashboard';
+import GenderDiscovery from './pages/GenderDiscovery';
+import TextSynthesis from './pages/TextSynthesis';
+import NeuralTranslate from './pages/NeuralTranslate';
+import EmpathyEngine from './pages/EmpathyEngine';
+import CognitiveQA from './pages/CognitiveQA';
+import ZeroShotLab from './pages/ZeroShotLab';
+import DataClusters from './pages/DataClusters';
+import DbscanLab from './pages/DbscanLab';
+import AssociationRules from './pages/AssociationRules';
+import './index.css';
+
+function App() {
+  return (
+    <Router>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/gender" element={<GenderDiscovery />} />
+          <Route path="/textgen" element={<TextSynthesis />} />
+          <Route path="/translate" element={<NeuralTranslate />} />
+          <Route path="/sentiment" element={<EmpathyEngine />} />
+          <Route path="/qa" element={<CognitiveQA />} />
+          <Route path="/zsl" element={<ZeroShotLab />} />
+          <Route path="/clustering" element={<DataClusters />} />
+          <Route path="/dbscan" element={<DbscanLab />} />
+          <Route path="/apriori" element={<AssociationRules />} />
+        </Routes>
+      </Layout>
+    </Router>
+  );
+}
+
+export default App;

frontend/src/components/Layout.jsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import Sidebar from './Sidebar';
+import { Menu } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+export default function Layout({ children }) {
+    const [sidebarOpen, setSidebarOpen] = useState(false);
+
+    return (
+        <div className="flex min-h-screen">
+            <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+            <main className="flex-1 min-h-screen">
+                {/* Top bar */}
+                <header className="flex items-center gap-4 px-4 sm:px-8 py-4 lg:py-6">
+                    <button
+                        onClick={() => setSidebarOpen(true)}
+                        className="lg:hidden p-2 hover:bg-white/5 rounded-xl transition-colors"
+                    >
+                        <Menu size={22} />
+                    </button>
+                    <div className="flex-1" />
+                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                        <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
+                        <span className="text-xs font-semibold text-emerald-400">Online</span>
+                    </div>
+                </header>
+
+                {/* Content */}
+                <motion.div
+                    key={location.pathname}
+                    initial={{ opacity: 0, y: 12 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.35 }}
+                    className="px-4 sm:px-8 pb-8"
+                >
+                    {children}
+                </motion.div>
+            </main>
+        </div>
+    );
+}

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+    LayoutDashboard, User, PenTool, Languages, Smile, Brain,
+    Target, PieChart, Braces, ShoppingCart, Menu, X
+} from 'lucide-react';
+
+const navItems = [
+    { path: '/', label: 'Dashboard', icon: LayoutDashboard },
+    { path: '/gender', label: 'Gender Discovery', icon: User },
+    { path: '/textgen', label: 'Text Synthesis', icon: PenTool },
+    { path: '/translate', label: 'Neural Translate', icon: Languages },
+    { path: '/sentiment', label: 'Empathy Engine', icon: Smile },
+    { path: '/qa', label: 'Cognitive QA', icon: Brain },
+    { path: '/zsl', label: 'Zero-Shot Lab', icon: Target },
+    { path: '/clustering', label: 'Data Clusters', icon: PieChart },
+    { path: '/dbscan', label: 'DBSCAN Lab', icon: Braces },
+    { path: '/apriori', label: 'Association Rules', icon: ShoppingCart },
+];
+
+export default function Sidebar({ isOpen, onClose }) {
+    return (
+        <>
+            {/* Mobile overlay */}
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
+                        onClick={onClose}
+                    />
+                )}
+            </AnimatePresence>
+
+            {/* Sidebar */}
+            <aside className={`
+        fixed top-0 left-0 h-screen w-[280px] z-50
+        bg-[#0a0f1c] border-r border-white/8
+        flex flex-col p-6 gap-6
+        transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]
+        lg:translate-x-0 lg:static
+        ${isOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full'}
+      `}>
+                {/* Brand */}
+                <div className="flex items-center gap-3 px-2">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-purple-500 grid place-items-center font-extrabold text-white text-sm">
+                        AI
+                    </div>
+                    <span className="text-lg font-bold tracking-tight">Quantum Hub</span>
+                    <button onClick={onClose} className="lg:hidden ml-auto p-1 hover:bg-white/5 rounded-lg">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                {/* Nav */}
+                <nav className="flex flex-col gap-1 flex-1 overflow-y-auto">
+                    {navItems.map(({ path, label, icon: Icon }) => (
+                        <NavLink
+                            key={path}
+                            to={path}
+                            onClick={onClose}
+                            className={({ isActive }) => `
+                flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium
+                transition-all duration-200
+                ${isActive
+                                    ? 'bg-cyan-500/10 text-cyan-400'
+                                    : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'
+                                }
+              `}
+                        >
+                            <Icon size={18} />
+                            <span>{label}</span>
+                        </NavLink>
+                    ))}
+                </nav>
+
+                {/* Footer */}
+                <div className="px-3 py-3 rounded-xl bg-white/3 border border-white/5 text-center">
+                    <p className="text-xs text-slate-500">Powered by</p>
+                    <p className="text-xs font-semibold gradient-text">Quantum AI Engine</p>
+                </div>
+            </aside>
+        </>
+    );
+}

frontend/src/components/UI.jsx

@@ -0,0 +1,69 @@
+import { motion } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
+
+export function PageHeader({ title, subtitle }) {
+    return (
+        <div className="mb-8">
+            <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">{title}</h1>
+            {subtitle && <p className="text-slate-400 mt-1 text-sm sm:text-base">{subtitle}</p>}
+        </div>
+    );
+}
+
+export function ResultBox({ children, className = '' }) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={`mt-6 p-5 sm:p-6 rounded-2xl bg-gradient-to-br from-cyan-500/5 to-purple-500/5 border border-cyan-500/10 ${className}`}
+        >
+            {children}
+        </motion.div>
+    );
+}
+
+export function ErrorBox({ message }) {
+    if (!message) return null;
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="mt-4 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm"
+        >
+            ⚠️ {message}
+        </motion.div>
+    );
+}
+
+export function SubmitButton({ loading, children, onClick, type = 'submit' }) {
+    return (
+        <button
+            type={type}
+            onClick={onClick}
+            disabled={loading}
+            className="btn-quantum w-full py-3.5 px-6 text-base font-bold rounded-xl flex items-center justify-center gap-2 disabled:opacity-60"
+        >
+            {loading ? <Loader2 className="animate-spin" size={20} /> : null}
+            {loading ? 'Processing...' : children}
+        </button>
+    );
+}
+
+export function UploadZone({ accept, name, onChange, label, sublabel }) {
+    return (
+        <label className="block cursor-pointer">
+            <div className="border-2 border-dashed border-white/10 rounded-2xl p-8 text-center hover:border-cyan-500/30 hover:bg-cyan-500/3 transition-all">
+                <div className="text-3xl mb-3 gradient-text">☁️</div>
+                <p className="font-semibold text-sm">{label || 'Click to upload'}</p>
+                <p className="text-xs text-slate-500 mt-1">{sublabel || 'Drag and drop supported'}</p>
+            </div>
+            <input
+                type="file"
+                accept={accept}
+                name={name}
+                onChange={onChange}
+                className="hidden"
+            />
+        </label>
+    );
+}

frontend/src/index.css

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --bg-deep: #050a14;
+  --sidebar-bg: #0a0f1c;
+  --card-bg: rgba(15, 23, 42, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --accent-cyan: #00d4ff;
+  --accent-purple: #a855f7;
+  --text-primary: #f0f2f5;
+  --text-secondary: #64748b;
+}
+
+* {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+body {
+  background: var(--bg-deep);
+  color: var(--text-primary);
+  overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* Glass Card */
+.glass-card {
+  background: var(--card-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #00d4ff, #a855f7);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Quantum button */
+.btn-quantum {
+  background: linear-gradient(135deg, #00d4ff 0%, #a855f7 100%);
+  color: white;
+  border: none;
+  border-radius: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 8px 25px -8px rgba(0, 212, 255, 0.4);
+}
+
+.btn-quantum:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 35px -8px rgba(0, 212, 255, 0.5);
+}
+
+.btn-quantum:active {
+  transform: translateY(0);
+}
+
+/* Custom input styles */
+.quantum-input {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid var(--glass-border);
+  border-radius: 14px;
+  padding: 14px 18px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  transition: all 0.3s;
+  outline: none;
+}
+
+.quantum-input:focus {
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
+}
+
+.quantum-input::placeholder {
+  color: var(--text-secondary);
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/pages/AssociationRules.jsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { ShoppingCart } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function AssociationRules() {
+    const [file, setFile] = useState(null);
+    const [metric, setMetric] = useState('lift');
+    const [minSupport, setMinSupport] = useState(0.1);
+    const [minThreshold, setMinThreshold] = useState(0.7);
+    const [hasHeader, setHasHeader] = useState(false);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!file) return setError('Please upload a file');
+        setLoading(true); setError(''); setResult(null);
+
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('metric', metric);
+        fd.append('min_support', minSupport);
+        fd.append('min_threshold', minThreshold);
+        fd.append('has_header', hasHeader);
+
+        try {
+            const res = await axios.post('/api/apriori', fd);
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="max-w-4xl mx-auto">
+            <PageHeader title="Association Rules" subtitle="Discover hidden relationships in transactional datasets using Apriori." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Transaction Data" sublabel=".CSV or .XLSX (each row = transaction)" />
+                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Metric</label>
+                        <select value={metric} onChange={(e) => setMetric(e.target.value)} className="quantum-input">
+                            <option value="lift">Lift</option>
+                            <option value="confidence">Confidence</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Support</label>
+                        <input type="number" value={minSupport} onChange={(e) => setMinSupport(e.target.value)} step="0.01" min="0.01" max="1" className="quantum-input" />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Threshold</label>
+                        <input type="number" value={minThreshold} onChange={(e) => setMinThreshold(e.target.value)} step="0.1" min="0.1" className="quantum-input" />
+                    </div>
+                    <div className="flex items-end">
+                        <label className="flex items-center gap-3 cursor-pointer text-sm text-slate-300">
+                            <input type="checkbox" checked={hasHeader} onChange={(e) => setHasHeader(e.target.checked)} className="w-4 h-4 rounded" />
+                            File has header row
+                        </label>
+                    </div>
+                </div>
+
+                <SubmitButton loading={loading}>
+                    <ShoppingCart size={18} /> Generate Rules
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">
+                        Mining Results: {result.count} rules discovered
+                    </p>
+                    <div className="overflow-x-auto -mx-2">
+                        <table className="w-full text-sm">
+                            <thead>
+                                <tr className="text-left text-xs uppercase tracking-wider text-slate-500 border-b border-white/10">
+                                    <th className="p-3">Antecedents (If)</th>
+                                    <th className="p-3">Consequents (Then)</th>
+                                    <th className="p-3">Support</th>
+                                    <th className="p-3">Confidence</th>
+                                    <th className="p-3">Lift</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {result.rules?.map((rule, i) => (
+                                    <tr key={i} className="border-b border-white/5 hover:bg-white/3">
+                                        <td className="p-3">
+                                            <span className="px-2 py-0.5 rounded text-xs font-semibold bg-blue-500/20 text-blue-400">
+                                                {rule.antecedents.join(', ')}
+                                            </span>
+                                        </td>
+                                        <td className="p-3">
+                                            <span className="px-2 py-0.5 rounded text-xs font-semibold bg-purple-500/20 text-purple-400">
+                                                {rule.consequents.join(', ')}
+                                            </span>
+                                        </td>
+                                        <td className="p-3 text-slate-300">{rule.support.toFixed(4)}</td>
+                                        <td className="p-3 text-slate-300">{rule.confidence.toFixed(4)}</td>
+                                        <td className="p-3 text-slate-300">{rule.lift.toFixed(4)}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/CognitiveQA.jsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Brain, Volume2 } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function CognitiveQA() {
+    const [tab, setTab] = useState('text');
+    const [context, setContext] = useState('');
+    const [question, setQuestion] = useState('');
+    const [file, setFile] = useState(null);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true); setError(''); setResult(null);
+
+        try {
+            let res;
+            if (tab === 'text') {
+                res = await axios.post('/api/qa', { context, question });
+            } else {
+                const fd = new FormData();
+                fd.append('context', context);
+                fd.append('voice', file);
+                res = await axios.post('/api/qa', fd);
+            }
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    const playAudio = () => {
+        if (result?.audio_url) {
+            const audio = new Audio(result.audio_url + '?v=' + Date.now());
+            audio.play();
+        }
+    };
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <PageHeader title="Cognitive QA" subtitle="Knowledge extraction engine with vocal synthesis output." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">Context Repository</label>
+                    <textarea
+                        value={context}
+                        onChange={(e) => setContext(e.target.value)}
+                        placeholder="Paste the reference document here..."
+                        className="quantum-input min-h-[180px] resize-y"
+                        required
+                    />
+                </div>
+
+                <div className="flex gap-2 border-b border-white/10 pb-3">
+                    {['text', 'voice'].map(t => (
+                        <button
+                            key={t}
+                            type="button"
+                            onClick={() => setTab(t)}
+                            className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${tab === t ? 'bg-cyan-500/10 text-cyan-400' : 'text-slate-400 hover:bg-white/5'
+                                }`}
+                        >
+                            {t === 'text' ? 'Type Question' : 'Voice Question'}
+                        </button>
+                    ))}
+                </div>
+
+                {tab === 'text' ? (
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Query</label>
+                        <input
+                            type="text"
+                            value={question}
+                            onChange={(e) => setQuestion(e.target.value)}
+                            placeholder="Ask a question about the context..."
+                            className="quantum-input"
+                        />
+                    </div>
+                ) : (
+                    <UploadZone accept="audio/*" onChange={(e) => setFile(e.target.files[0])} label="Record Your Query" sublabel="Upload audio for voice-to-voice QA" />
+                )}
+
+                <SubmitButton loading={loading}>
+                    <Brain size={18} /> Execute Reasoning
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Reasoning Output</p>
+
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-5 rounded-xl bg-black/20 border-l-4 border-cyan-400">
+                        <div className="flex-1">
+                            <span className="text-xs font-bold text-cyan-400 uppercase">Extracted Answer</span>
+                            <p className="text-xl font-bold text-slate-100 mt-1">{result.answer}</p>
+                        </div>
+                        {result.audio_url && (
+                            <button
+                                type="button"
+                                onClick={playAudio}
+                                className="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-purple-500 grid place-items-center text-white hover:scale-110 transition-transform flex-shrink-0"
+                            >
+                                <Volume2 size={22} />
+                            </button>
+                        )}
+                    </div>
+
+                    {result.score > 0 && (
+                        <div className="mt-4">
+                            <div className="h-2 bg-white/5 rounded-full overflow-hidden">
+                                <div
+                                    className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full transition-all duration-1000"
+                                    style={{ width: `${result.score}%` }}
+                                />
+                            </div>
+                            <div className="flex justify-between text-sm text-slate-400 mt-1">
+                                <span>Confidence</span>
+                                <span>{result.score}%</span>
+                            </div>
+                        </div>
+                    )}
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import {
+    User, PenTool, Languages, Smile, Brain,
+    Target, PieChart, Braces, ShoppingCart
+} from 'lucide-react';
+import { PageHeader } from '../components/UI';
+
+const services = [
+    { path: '/gender', label: 'Gender Discovery', desc: 'Vision Transformer for high-precision gender classification.', icon: User, color: 'from-pink-500 to-rose-500' },
+    { path: '/textgen', label: 'Text Synthesis', desc: 'Creative language generation powered by GPT-2 architecture.', icon: PenTool, color: 'from-cyan-500 to-blue-500' },
+    { path: '/translate', label: 'Neural Translate', desc: 'Advanced English-to-Urdu translation using sequence models.', icon: Languages, color: 'from-emerald-500 to-teal-500' },
+    { path: '/sentiment', label: 'Empathy Engine', desc: 'Analyze emotional valence in text and vocal inputs.', icon: Smile, color: 'from-amber-500 to-orange-500' },
+    { path: '/qa', label: 'Cognitive QA', desc: 'Extract precise knowledge from context with DistilBERT.', icon: Brain, color: 'from-violet-500 to-purple-500' },
+    { path: '/zsl', label: 'Zero-Shot Lab', desc: 'BART-based classification for any unseen categories.', icon: Target, color: 'from-red-500 to-pink-500' },
+    { path: '/clustering', label: 'Data Clusters', desc: 'Automated pattern discovery using K-Means clustering.', icon: PieChart, color: 'from-sky-500 to-indigo-500' },
+    { path: '/dbscan', label: 'DBSCAN Lab', desc: 'Density-based clustering for complex patterns and outliers.', icon: Braces, color: 'from-lime-500 to-emerald-500' },
+    { path: '/apriori', label: 'Market Analytics', desc: 'Generate association rules from transactional data.', icon: ShoppingCart, color: 'from-fuchsia-500 to-violet-500' },
+];
+
+const container = {
+    hidden: {},
+    show: { transition: { staggerChildren: 0.06 } }
+};
+
+const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0, transition: { duration: 0.4 } }
+};
+
+export default function Dashboard() {
+    return (
+        <div>
+            <PageHeader title="Quantum Analytics" subtitle="Select a specialized AI engine to begin processing." />
+
+            <motion.div
+                variants={container}
+                initial="hidden"
+                animate="show"
+                className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5"
+            >
+                {services.map((s) => (
+                    <motion.div key={s.path} variants={item}>
+                        <Link
+                            to={s.path}
+                            className="glass-card p-6 flex flex-col gap-4 group hover:translate-y-[-6px] block"
+                        >
+                            <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${s.color} grid place-items-center opacity-80 group-hover:opacity-100 transition-all group-hover:scale-110`}>
+                                <s.icon size={22} className="text-white" />
+                            </div>
+                            <div>
+                                <h3 className="text-lg font-bold mb-1">{s.label}</h3>
+                                <p className="text-sm text-slate-400 leading-relaxed">{s.desc}</p>
+                            </div>
+                            <div className="mt-auto pt-2">
+                                <span className="text-xs font-bold uppercase tracking-widest text-cyan-400 group-hover:underline">
+                                    Launch Engine →
+                                </span>
+                            </div>
+                        </Link>
+                    </motion.div>
+                ))}
+            </motion.div>
+        </div>
+    );
+}

frontend/src/pages/DataClusters.jsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { PieChart } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function DataClusters() {
+    const [file, setFile] = useState(null);
+    const [clusters, setClusters] = useState(3);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!file) return setError('Please upload a file');
+        setLoading(true); setError(''); setResult(null);
+
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('clusters', clusters);
+
+        try {
+            const res = await axios.post('/api/clustering', fd);
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <PageHeader title="Data Clusters" subtitle="Unsupervised grouping of multivariate datasets using K-Means." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Data Structure" sublabel=".CSV or .XLSX datasets" />
+                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
+
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">Cluster Centroids (K)</label>
+                    <input
+                        type="number"
+                        value={clusters}
+                        onChange={(e) => setClusters(e.target.value)}
+                        min="2" max="10"
+                        className="quantum-input w-32"
+                    />
+                </div>
+
+                <SubmitButton loading={loading}>
+                    <PieChart size={18} /> Map Clusters
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Clustering Visualization</p>
+                    <div className="bg-white p-4 rounded-2xl">
+                        <img src={`data:image/png;base64,${result.plot}`} alt="Cluster Plot" className="w-full rounded-xl" />
+                    </div>
+                    {result.cluster_info && (
+                        <div className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3">
+                            {Object.entries(result.cluster_info).map(([k, v]) => (
+                                <div key={k} className="p-3 rounded-xl bg-white/3 border-l-3 border-purple-500">
+                                    <span className="text-xs font-bold text-purple-400 uppercase">Cluster {k}</span>
+                                    <p className="text-lg font-extrabold mt-1">{v} Entities</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/DbscanLab.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Braces } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function DbscanLab() {
+    const [file, setFile] = useState(null);
+    const [eps, setEps] = useState(0.5);
+    const [minSamples, setMinSamples] = useState(5);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!file) return setError('Please upload a file');
+        setLoading(true); setError(''); setResult(null);
+
+        const fd = new FormData();
+        fd.append('file', file);
+        fd.append('eps', eps);
+        fd.append('min_samples', minSamples);
+
+        try {
+            const res = await axios.post('/api/dbscan', fd);
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="max-w-3xl mx-auto">
+            <PageHeader title="DBSCAN Lab" subtitle="Density-based clustering to identify complex patterns and outliers." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Data Structure" sublabel=".CSV or .XLSX datasets" />
+                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Epsilon (eps)</label>
+                        <input type="number" value={eps} onChange={(e) => setEps(e.target.value)} step="0.01" min="0.01" className="quantum-input" />
+                    </div>
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Samples</label>
+                        <input type="number" value={minSamples} onChange={(e) => setMinSamples(e.target.value)} min="1" className="quantum-input" />
+                    </div>
+                </div>
+
+                <SubmitButton loading={loading}>
+                    <Braces size={18} /> Run DBSCAN
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">DBSCAN Visualization</p>
+                    <div className="bg-white p-4 rounded-2xl">
+                        <img src={`data:image/png;base64,${result.plot}`} alt="DBSCAN Plot" className="w-full rounded-xl" />
+                    </div>
+                    {result.cluster_info && (
+                        <div className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3">
+                            {Object.entries(result.cluster_info).map(([k, v]) => (
+                                <div key={k} className="p-3 rounded-xl bg-white/3 border-l-3 border-purple-500">
+                                    <span className="text-xs font-bold text-purple-400 uppercase">{k === '-1' ? 'Noise' : `Cluster ${k}`}</span>
+                                    <p className="text-lg font-extrabold mt-1">{v} Entities</p>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/EmpathyEngine.jsx

@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Smile, Frown, Meh, Mic } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function EmpathyEngine() {
+    const [tab, setTab] = useState('text');
+    const [text, setText] = useState('');
+    const [file, setFile] = useState(null);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setLoading(true); setError(''); setResult(null);
+
+        try {
+            let res;
+            if (tab === 'text') {
+                res = await axios.post('/api/sentiment', { text });
+            } else {
+                const fd = new FormData();
+                fd.append('voice', file);
+                res = await axios.post('/api/sentiment', fd);
+            }
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    const sentimentIcon = (label) => {
+        const l = (label || '').toLowerCase();
+        if (l === 'positive') return <Smile size={48} className="text-emerald-400" />;
+        if (l === 'negative') return <Frown size={48} className="text-red-400" />;
+        return <Meh size={48} className="text-cyan-400" />;
+    };
+
+    const sentimentColor = (label) => {
+        const l = (label || '').toLowerCase();
+        if (l === 'positive') return 'text-emerald-400';
+        if (l === 'negative') return 'text-red-400';
+        return 'text-cyan-400';
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <PageHeader title="Empathy Engine" subtitle="Contextual sentiment analysis for text and vocal recordings." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                {/* Tabs */}
+                <div className="flex gap-2 border-b border-white/10 pb-3">
+                    {['text', 'voice'].map(t => (
+                        <button
+                            key={t}
+                            type="button"
+                            onClick={() => setTab(t)}
+                            className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${tab === t ? 'bg-cyan-500/10 text-cyan-400' : 'text-slate-400 hover:bg-white/5'
+                                }`}
+                        >
+                            {t === 'text' ? 'Text Analysis' : 'Vocal Analysis'}
+                        </button>
+                    ))}
+                </div>
+
+                {tab === 'text' ? (
+                    <div>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2">Input Text</label>
+                        <textarea
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                            placeholder="Explain how you're feeling..."
+                            className="quantum-input min-h-[140px] resize-y"
+                        />
+                    </div>
+                ) : (
+                    <div>
+                        <UploadZone accept="audio/*" onChange={(e) => setFile(e.target.files[0])} label="Upload Voice Recording" sublabel="WAV or MP3 format" />
+                        {file && <p className="text-sm text-cyan-400 text-center mt-2 font-medium">🎙 {file.name}</p>}
+                    </div>
+                )}
+
+                <SubmitButton loading={loading}>
+                    <Mic size={18} /> Analyze Sentiment
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Engine Output</p>
+                    {result.transcript && (
+                        <div className="mb-4 p-3 rounded-xl bg-black/20 text-sm">
+                            <span className="text-xs font-bold text-cyan-400 uppercase">Transcription</span>
+                            <p className="mt-1 text-slate-300">"{result.transcript}"</p>
+                        </div>
+                    )}
+                    <div className="flex items-center gap-6 p-4 rounded-xl bg-white/3">
+                        <div className="flex-1">
+                            <span className="text-sm text-slate-400">Detected Sentiment</span>
+                            <p className={`text-3xl font-extrabold capitalize ${sentimentColor(result.result)}`}>
+                                {result.result}
+                            </p>
+                            <span className="text-sm text-slate-500">{result.score}% confidence</span>
+                        </div>
+                        {sentimentIcon(result.result)}
+                    </div>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/GenderDiscovery.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Upload } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+
+export default function GenderDiscovery() {
+    const [file, setFile] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const [result, setResult] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleFile = (e) => {
+        const f = e.target.files[0];
+        if (f) {
+            setFile(f);
+            setPreview(URL.createObjectURL(f));
+        }
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!file) return setError('Please select an image');
+        setLoading(true); setError(''); setResult('');
+
+        const fd = new FormData();
+        fd.append('image', file);
+
+        try {
+            const res = await axios.post('/api/gender', fd);
+            setResult(res.data.result);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <PageHeader title="Gender Discovery" subtitle="Upload a visual specimen for neural gender classification." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <UploadZone accept="image/*" name="image" onChange={handleFile} label="Upload Image" sublabel="PNG, JPG or WEBP (max 10MB)" />
+
+                {preview && (
+                    <div className="rounded-2xl overflow-hidden border border-white/10">
+                        <img src={preview} alt="Preview" className="w-full h-56 object-cover" />
+                    </div>
+                )}
+
+                {file && <p className="text-sm text-cyan-400 text-center font-medium">📎 {file.name}</p>}
+
+                <SubmitButton loading={loading}>
+                    <Upload size={18} /> Run Discovery Engine
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-2">Engine Output</p>
+                    <div className="flex justify-between items-center">
+                        <span className="text-slate-400">Detected Gender</span>
+                        <span className="text-3xl font-extrabold">{result}</span>
+                    </div>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/NeuralTranslate.jsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Languages, Copy, Check } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+
+export default function NeuralTranslate() {
+    const [text, setText] = useState('');
+    const [result, setResult] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!text.trim()) return;
+        setLoading(true); setError(''); setResult('');
+        try {
+            const res = await axios.post('/api/translate', { text });
+            setResult(res.data.translated_text);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    const copyText = () => {
+        navigator.clipboard.writeText(result);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <PageHeader title="Neural Translate" subtitle="Advanced English-to-Urdu translation using sequence models." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">English Text</label>
+                    <textarea
+                        value={text}
+                        onChange={(e) => setText(e.target.value)}
+                        placeholder="Type or paste English text here..."
+                        className="quantum-input min-h-[140px] resize-y"
+                    />
+                </div>
+                <SubmitButton loading={loading}>
+                    <Languages size={18} /> Translate to Urdu
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <div className="flex items-center justify-between mb-3">
+                        <p className="text-xs font-bold uppercase tracking-widest text-purple-400">Urdu Translation</p>
+                        <button onClick={copyText} className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors bg-white/5 px-3 py-1.5 rounded-lg">
+                            {copied ? <Check size={14} /> : <Copy size={14} />}
+                            {copied ? 'Copied!' : 'Copy'}
+                        </button>
+                    </div>
+                    <p className="text-xl text-slate-200 leading-relaxed text-right font-medium" dir="rtl">{result}</p>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/TextSynthesis.jsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { PenTool, Copy, Check } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+
+export default function TextSynthesis() {
+    const [prompt, setPrompt] = useState('');
+    const [result, setResult] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!prompt.trim()) return;
+        setLoading(true); setError(''); setResult('');
+        try {
+            const res = await axios.post('/api/textgen', { prompt });
+            setResult(res.data.generated_text);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    const copyText = () => {
+        navigator.clipboard.writeText(result);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <PageHeader title="Text Synthesis" subtitle="Creative language generation powered by GPT-2 architecture." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">Synthesis Prompt</label>
+                    <textarea
+                        value={prompt}
+                        onChange={(e) => setPrompt(e.target.value)}
+                        placeholder="Enter a seed sentence for the AI to expand upon..."
+                        className="quantum-input min-h-[140px] resize-y"
+                    />
+                </div>
+                <SubmitButton loading={loading}>
+                    <PenTool size={18} /> Synthesize Text
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <div className="flex items-center justify-between mb-3">
+                        <p className="text-xs font-bold uppercase tracking-widest text-purple-400">Generated Output</p>
+                        <button onClick={copyText} className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors bg-white/5 px-3 py-1.5 rounded-lg">
+                            {copied ? <Check size={14} /> : <Copy size={14} />}
+                            {copied ? 'Copied!' : 'Copy'}
+                        </button>
+                    </div>
+                    <p className="text-slate-200 leading-relaxed">{result}</p>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/src/pages/ZeroShotLab.jsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import axios from 'axios';
+import { Target } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+
+export default function ZeroShotLab() {
+    const [text, setText] = useState('');
+    const [labels, setLabels] = useState('');
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!text.trim() || !labels.trim()) return;
+        setLoading(true); setError(''); setResult(null);
+        try {
+            const res = await axios.post('/api/zsl', { text, labels });
+            setResult(res.data);
+        } catch (err) {
+            setError(err.response?.data?.error || 'Request failed');
+        } finally { setLoading(false); }
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <PageHeader title="Zero-Shot Lab" subtitle="BART-based classification for any unseen categories." />
+
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">Input Text</label>
+                    <textarea
+                        value={text}
+                        onChange={(e) => setText(e.target.value)}
+                        placeholder="Enter text to classify..."
+                        className="quantum-input min-h-[120px] resize-y"
+                        required
+                    />
+                </div>
+                <div>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2">Candidate Labels</label>
+                    <input
+                        type="text"
+                        value={labels}
+                        onChange={(e) => setLabels(e.target.value)}
+                        placeholder="politics, sports, technology, health..."
+                        className="quantum-input"
+                        required
+                    />
+                    <p className="text-xs text-slate-500 mt-1">Separate labels with commas</p>
+                </div>
+                <SubmitButton loading={loading}>
+                    <Target size={18} /> Classify Text
+                </SubmitButton>
+            </form>
+
+            <ErrorBox message={error} />
+
+            {result && (
+                <ResultBox>
+                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Classification Results</p>
+                    <div className="mb-4 p-4 rounded-xl bg-black/20 text-center">
+                        <span className="text-sm text-slate-400">Best Match</span>
+                        <p className="text-2xl font-extrabold text-cyan-400 mt-1">{result.best_label}</p>
+                        <span className="text-sm text-slate-500">{result.best_score}% confidence</span>
+                    </div>
+                    <div className="space-y-2">
+                        {result.results?.map((r, i) => (
+                            <div key={i} className="flex items-center gap-3">
+                                <span className="text-sm text-slate-300 w-28 truncate capitalize">{r.label}</span>
+                                <div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden">
+                                    <div
+                                        className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full transition-all duration-700"
+                                        style={{ width: `${r.score}%` }}
+                                    />
+                                </div>
+                                <span className="text-xs text-slate-400 w-12 text-right">{r.score}%</span>
+                            </div>
+                        ))}
+                    </div>
+                </ResultBox>
+            )}
+        </div>
+    );
+}

frontend/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:5000',
+      '/static': 'http://localhost:5000',
+    }
+  }
+})

requirements.txt

@@ -1,4 +1,5 @@
 flask
+flask-cors
 transformers
 torch
 pillow