My app

.gitignore

@@ -0,0 +1,19 @@
+# 🔒 لا ترفع هذا الملف أبداً على GitHub!
+.env
+
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+venv/
+.venv/
+env/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+
+# OS
+.DS_Store
+Thumbs.db

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:app

README.md

@@ -1 +1,134 @@
-# sentiment_project
+# 🧠 محلل المشاعر | Sentiment Analyzer
+
+تطبيق ويب لتحليل مشاعر النصوص بأكثر من 20 لغة باستخدام Claude AI و Flask.
+
+---
+
+## 📁 هيكل المشروع
+
+```
+sentiment_project/
+├── app.py                 ← السيرفر الخلفي (Flask)
+├── requirements.txt       ← المكتبات المطلوبة
+├── Procfile               ← للنشر على Render/Railway
+├── .env.example           ← نموذج إعدادات البيئة
+├── .gitignore             ← ملفات يجب استثناؤها من Git
+├── README.md              ← هذا الملف
+└── templates/
+    └── index.html         ← الواجهة الأمامية
+```
+
+---
+
+## 🚀 التشغيل المحلي
+
+### 1. استنسخ المشروع
+```bash
+git clone https://github.com/username/sentiment-analyzer.git
+cd sentiment-analyzer
+```
+
+### 2. أنشئ بيئة افتراضية
+```bash
+python -m venv venv
+source venv/bin/activate        # Mac/Linux
+venv\Scripts\activate           # Windows
+```
+
+### 3. ثبّت المكتبات
+```bash
+pip install -r requirements.txt
+```
+
+### 4. أعدّ مفتاح API
+```bash
+cp .env.example .env
+```
+افتح ملف `.env` وأضف مفتاحك من https://console.anthropic.com/settings/keys:
+```
+ANTHROPIC_API_KEY=sk-ant-api03-XXXXXXXXXXXXXXXXXXXXXXXX
+```
+
+### 5. شغّل السيرفر
+```bash
+python app.py
+```
+افتح المتصفح على: **http://localhost:5000**
+
+---
+
+## ☁️ النشر على Render (مجاني)
+
+### 1. ارفع المشروع على GitHub
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+git remote add origin https://github.com/username/sentiment-analyzer.git
+git push -u origin main
+```
+> ⚠️ تأكد أن `.env` موجود في `.gitignore` ولم يُرفع!
+
+### 2. أنشئ حساباً على Render
+- اذهب إلى: https://render.com
+- سجّل دخول بحساب GitHub
+
+### 3. أنشئ Web Service جديد
+- New → Web Service
+- اختر repository المشروع
+- الإعدادات:
+  - **Build Command:** `pip install -r requirements.txt`
+  - **Start Command:** `gunicorn app:app`
+  - **Environment:** Python 3
+
+### 4. أضف متغيرات البيئة
+في لوحة Render → Environment → Add:
+```
+ANTHROPIC_API_KEY = sk-ant-api03-XXXXXXXXXXXXXXXXXXXXXXXX
+```
+
+### 5. انشر! 🎉
+سيعطيك Render رابطاً مثل: `https://sentiment-analyzer.onrender.com`
+
+---
+
+## 🔒 أمان API Key
+
+| ✅ آمن | ❌ خطر |
+|--------|--------|
+| متغير بيئة `.env` | في الكود مباشرة |
+| Environment Variables في Render | في ملف HTML |
+| Backend فقط يرى المفتاح | في Git/GitHub |
+
+---
+
+## 🛠️ التقنيات المستخدمة
+
+- **Backend:** Python, Flask, Anthropic SDK
+- **Frontend:** HTML, CSS, JavaScript
+- **AI Model:** Claude claude-sonnet-4-20250514
+- **Deployment:** Render / Railway / Heroku
+- **NLP Task:** Multilingual Sentiment Analysis
+
+---
+
+## 📊 API Endpoints
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/` | الصفحة الرئيسية |
+| POST | `/api/analyze` | تحليل النص |
+| GET | `/api/health` | فحص حالة السيرفر |
+
+### مثال على طلب API:
+```bash
+curl -X POST http://localhost:5000/api/analyze \
+  -H "Content-Type: application/json" \
+  -d '{"text": "المنتج رائع!", "text_lang": "ar", "response_lang": "Arabic"}'
+```
+
+---
+
+## 👨‍💻 المطوّر
+
+مشروع تعليمي في إطار تعلم **Data Science & NLP**

app.py

@@ -0,0 +1,185 @@
+"""
+API d'Analyse de Sentiment - Serveur Backend Flask
+Utilise Hugging Face Transformers (100% gratuit, fonctionne hors ligne)
+- Modèle anglais  : distilbert-base-uncased-finetuned-sst-2-english
+- Modèle multilingue : tabularisai/multilingual-sentiment-analysis
+"""
+
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from transformers import pipeline
+import os
+
+# Initialisation de l'application Flask
+app = Flask(__name__)
+
+# Autoriser les requêtes cross-origin (depuis le frontend)
+CORS(app)
+
+# ─────────────────────────────────────────
+# Chargement des modèles Hugging Face
+# Les modèles sont téléchargés automatiquement au premier lancement
+# puis mis en cache sur le disque pour les prochaines fois
+# ─────────────────────────────────────────
+print("⏳ Chargement des modèles... (première fois = quelques minutes)")
+
+# Modèle 1 : Anglais uniquement - rapide et précis
+model_en = pipeline(
+    "sentiment-analysis",
+    model="distilbert-base-uncased-finetuned-sst-2-english"
+)
+
+# Modèle 2 : Multilingue - supporte arabe, français, anglais, espagnol...
+model_multi = pipeline(
+    "sentiment-analysis",
+    model="tabularisai/multilingual-sentiment-analysis"
+)
+
+print("✅ Modèles chargés avec succès !")
+
+
+# ─────────────────────────────────────────
+# Fonction utilitaire : normaliser le résultat Hugging Face
+# Les modèles retournent des labels différents, on les unifie ici
+# ─────────────────────────────────────────
+def normalize_result(hf_result, text_lang):
+    """
+    Convertit le résultat brut de Hugging Face en format unifié pour le frontend.
+    hf_result : liste retournée par le pipeline, ex: [{'label': 'POSITIVE', 'score': 0.99}]
+    text_lang : langue du texte pour choisir les labels d'affichage
+    """
+
+    label_raw = hf_result[0]["label"].upper()
+    score     = round(hf_result[0]["score"] * 100)
+
+    # Mapping des labels vers notre format unifié
+    if any(p in label_raw for p in ["POSITIVE", "POS", "5 STARS", "4 STARS"]):
+        sentiment = "positive"
+        emoji     = "😊"
+        pos_score = score
+        neg_score = 100 - score
+        neu_score = 0
+    elif any(p in label_raw for p in ["NEGATIVE", "NEG", "1 STAR", "2 STARS"]):
+        sentiment = "negative"
+        emoji     = "😠"
+        pos_score = 100 - score
+        neg_score = score
+        neu_score = 0
+    else:
+        sentiment = "neutral"
+        emoji     = "😐"
+        pos_score = 30
+        neg_score = 30
+        neu_score = score
+
+    # Labels multilingues selon la langue de l'interface
+    labels = {
+        "ar": {"positive": "إيجابي", "negative": "سلبي", "neutral": "محايد", "mixed": "مختلط"},
+        "fr": {"positive": "Positif", "negative": "Négatif", "neutral": "Neutre", "mixed": "Mixte"},
+        "en": {"positive": "Positive", "negative": "Negative", "neutral": "Neutral", "mixed": "Mixed"},
+        "es": {"positive": "Positivo", "negative": "Negativo", "neutral": "Neutral", "mixed": "Mixto"},
+        "de": {"positive": "Positiv",  "negative": "Negativ",  "neutral": "Neutral", "mixed": "Gemischt"},
+    }
+
+    # Langue d'affichage (par défaut français)
+    ui_lang  = text_lang if text_lang in labels else "fr"
+    lang_map = labels[ui_lang]
+
+    return {
+        "sentiment"     : sentiment,
+        "emoji"         : emoji,
+        "label"         : lang_map[sentiment],
+        "sub"           : f"Score de confiance : {score}%",
+        "scores"        : {
+            "positive"  : pos_score,
+            "negative"  : neg_score,
+            "neutral"   : neu_score
+        },
+        "analysis"      : f"Le modèle a détecté un sentiment {lang_map[sentiment].lower()} "
+                          f"avec un score de confiance de {score}%. "
+                          f"Ce résultat est basé sur l'analyse locale via Hugging Face Transformers.",
+        "keywords"      : [],   # Hugging Face ne retourne pas de mots-clés
+        "business"      : f"Un sentiment {lang_map[sentiment].lower()} peut être utilisé "
+                          f"pour prioriser les retours clients et adapter la stratégie commerciale.",
+        "detected_lang" : text_lang if text_lang != "auto" else "Détection automatique"
+    }
+
+
+# ─────────────────────────────────────────
+# Route principale : affiche la page HTML
+# ─────────────────────────────────────────
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+# ───────────────���─────────────────────────
+# Route API : analyse du sentiment
+# Méthode : POST
+# Corps attendu : { "text": "...", "text_lang": "...", "model": "en"|"multi" }
+# ─────────────────────────────────────────
+@app.route("/api/analyze", methods=["POST"])
+def analyze():
+    # Récupération des données JSON envoyées par le frontend
+    data = request.get_json()
+
+    # Vérification que le texte est bien présent
+    if not data or "text" not in data:
+        return jsonify({"error": "Aucun texte fourni"}), 400
+
+    # Extraction des paramètres
+    text       = data.get("text", "").strip()
+    text_lang  = data.get("text_lang", "auto")
+    model_type = data.get("model", "multi")  # "en" ou "multi"
+
+    # Vérification que le texte n'est pas vide
+    if not text:
+        return jsonify({"error": "Le texte est vide"}), 400
+
+    # Limitation de la taille du texte (les modèles ont une limite de tokens)
+    if len(text) > 512:
+        text = text[:512]  # On tronque silencieusement
+
+    try:
+        # Choix du modèle selon le paramètre reçu
+        if model_type == "en":
+            # Modèle anglais : rapide, très précis pour l'anglais
+            hf_result = model_en(text)
+        else:
+            # Modèle multilingue : supporte arabe, français, espagnol, etc.
+            hf_result = model_multi(text)
+
+        # Normalisation et formatage du résultat
+        result = normalize_result(hf_result, text_lang)
+
+        # Ajout du modèle utilisé dans la réponse (utile pour le debug)
+        result["model_used"] = "English (DistilBERT)" if model_type == "en" else "Multilingue"
+
+        return jsonify(result)
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+# ─────────────────────────────────────────
+# Route API : vérification de l'état du serveur
+# ─────────────────────────────────────────
+@app.route("/api/health", methods=["GET"])
+def health():
+    return jsonify({
+        "status"  : "ok",
+        "models"  : {
+            "english"     : "distilbert-base-uncased-finetuned-sst-2-english",
+            "multilingual": "tabularisai/multilingual-sentiment-analysis"
+        }
+    })
+
+
+# ─────────────────────────────────────────
+# Point d'entrée : démarrage du serveur
+# ─────────────────────────────────────────
+if __name__ == "__main__":
+    port  = int(os.environ.get("PORT", 5000))
+    debug = os.environ.get("FLASK_DEBUG", "false").lower() == "true"
+    print(f"🚀 Serveur démarré sur http://localhost:{port}")
+    app.run(host="0.0.0.0", port=port, debug=debug)

requirements.txt

@@ -0,0 +1,5 @@
+flask==3.0.3
+flask-cors==4.0.1
+anthropic==0.34.0
+python-dotenv==1.0.1
+gunicorn==22.0.0

templates/index.html

@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>محلل المشاعر | Sentiment Analyzer</title>
+<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+<style>
+  :root{--bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a26;--border:#2a2a3d;--accent:#7c6af7;--accent2:#f76a8a;--accent3:#6af7c0;--text:#e8e8f0;--text-dim:#7a7a9a;--pos:#4ade80;--neg:#f87171;--neu:#facc15;}
+  *{margin:0;padding:0;box-sizing:border-box;}
+  body{background:var(--bg);color:var(--text);font-family:'Cairo',sans-serif;min-height:100vh;overflow-x:hidden;}
+  body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 40% at 20% 20%,rgba(124,106,247,.12) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 80%,rgba(247,106,138,.08) 0%,transparent 60%);pointer-events:none;z-index:0;}
+  .container{max-width:900px;margin:0 auto;padding:36px 20px;position:relative;z-index:1;}
+  .ui-lang-bar{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-bottom:26px;}
+  .ui-lang-bar button{background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:5px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-family:'Cairo',sans-serif;transition:all .2s;}
+  .ui-lang-bar button.active{background:rgba(124,106,247,.15);border-color:var(--accent);color:var(--accent);}
+  .ui-lang-bar button:hover{border-color:var(--accent);color:var(--accent);}
+  header{text-align:center;margin-bottom:42px;}
+  .badge{display:inline-block;font-family:'Space Mono',monospace;font-size:11px;color:var(--accent);border:1px solid var(--accent);padding:4px 14px;border-radius:20px;letter-spacing:2px;margin-bottom:16px;}
+  h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1.1;}
+  h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
+  .subtitle{color:var(--text-dim);margin-top:12px;font-size:1rem;}
+  .card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 32px;margin-bottom:22px;}
+  .card-label{font-size:12px;font-family:'Space Mono',monospace;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
+  .card-label::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%;}
+  .text-lang-grid{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
+  .tlang-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:5px 11px;border-radius:8px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:12px;transition:all .2s;}
+  .tlang-btn.active{background:rgba(124,106,247,.15);border-color:var(--accent);color:var(--accent);}
+  .tlang-btn:hover{border-color:var(--accent);color:var(--accent);}
+  textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);font-family:'Cairo',sans-serif;font-size:1rem;padding:16px;resize:vertical;min-height:140px;transition:border-color .3s;outline:none;direction:auto;}
+  textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,106,247,.15);}
+  textarea::placeholder{color:var(--text-dim);}
+  .examples{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
+  .example-chip{background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:5px 12px;border-radius:20px;font-size:12px;cursor:pointer;transition:all .2s;font-family:'Cairo',sans-serif;}
+  .example-chip:hover{border-color:var(--accent3);color:var(--accent3);}
+  .analyze-btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--accent),#9c6af7);border:none;border-radius:12px;color:white;font-family:'Cairo',sans-serif;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;margin-top:20px;}
+  .analyze-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,106,247,.4);}
+  .analyze-btn:disabled{opacity:.6;cursor:not-allowed;}
+  .loader{display:none;align-items:center;justify-content:center;gap:6px;padding:20px;}
+  .loader.active{display:flex;}
+  .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:bounce .8s infinite;}
+  .dot:nth-child(2){animation-delay:.15s;background:var(--accent2);}
+  .dot:nth-child(3){animation-delay:.3s;background:var(--accent3);}
+  .result-card{display:none;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;}
+  .result-card.visible{display:block;}
+  .sentiment-main{display:flex;align-items:center;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
+  .sentiment-emoji{font-size:4rem;}
+  .sentiment-info{flex:1;}
+  .sentiment-label{font-size:1.8rem;font-weight:900;margin-bottom:4px;}
+  .sentiment-label.positive{color:var(--pos);}
+  .sentiment-label.negative{color:var(--neg);}
+  .sentiment-label.neutral{color:var(--neu);}
+  .sentiment-label.mixed{color:var(--accent);}
+  .sentiment-sub{color:var(--text-dim);font-size:.9rem;}
+  .bar-wrap{background:var(--surface2);border-radius:4px;height:6px;margin:4px 0 12px;overflow:hidden;}
+  .bar-fill{height:100%;border-radius:4px;transition:width 1s cubic-bezier(.4,0,.2,1);}
+  .analysis-section{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;}
+  .analysis-section h3{font-size:13px;font-family:'Space Mono',monospace;color:var(--accent);letter-spacing:1px;margin-bottom:10px;}
+  .analysis-section p{color:var(--text-dim);font-size:.95rem;line-height:1.7;}
+  .keywords{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
+  .keyword{padding:4px 12px;border-radius:20px;font-size:13px;}
+  .keyword.pos{background:rgba(74,222,128,.1);color:var(--pos);border:1px solid rgba(74,222,128,.3);}
+  .keyword.neg{background:rgba(248,113,113,.1);color:var(--neg);border:1px solid rgba(248,113,113,.3);}
+  .keyword.neu{background:rgba(250,204,21,.1);color:var(--neu);border:1px solid rgba(250,204,21,.3);}
+  .history-section{margin-top:32px;}
+  .history-title{font-size:13px;font-family:'Space Mono',monospace;color:var(--text-dim);letter-spacing:2px;margin-bottom:14px;}
+  .history-list{display:flex;flex-direction:column;gap:10px;}
+  .history-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .2s;}
+  .history-item:hover{border-color:var(--accent);}
+  .history-emoji{font-size:1.4rem;}
+  .history-text{flex:1;font-size:.88rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+  .history-sentiment{font-size:12px;font-family:'Space Mono',monospace;white-space:nowrap;}
+  .history-sentiment.positive{color:var(--pos);}
+  .history-sentiment.negative{color:var(--neg);}
+  .history-sentiment.neutral{color:var(--neu);}
+  .history-sentiment.mixed{color:var(--accent);}
+  .error-msg{display:none;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:var(--neg);padding:13px 18px;border-radius:12px;margin-top:14px;font-size:.9rem;}
+  .error-msg.visible{display:block;}
+  footer{text-align:center;margin-top:50px;color:var(--text-dim);font-size:12px;font-family:'Space Mono',monospace;}
+  footer span{color:var(--accent);}
+  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="ui-lang-bar" id="uiLangBar">
+    <button onclick="setUiLang('ar',this)" class="active">🇩🇿 العربية</button>
+    <button onclick="setUiLang('en',this)">🇬🇧 English</button>
+    <button onclick="setUiLang('fr',this)">🇫🇷 Français</button>
+    <button onclick="setUiLang('es',this)">🇪🇸 Español</button>
+    <button onclick="setUiLang('de',this)">🇩🇪 Deutsch</button>
+    <button onclick="setUiLang('it',this)">🇮🇹 Italiano</button>
+    <button onclick="setUiLang('pt',this)">🇧🇷 Português</button>
+    <button onclick="setUiLang('ru',this)">🇷🇺 Русский</button>
+    <button onclick="setUiLang('zh',this)">🇨🇳 中文</button>
+    <button onclick="setUiLang('ja',this)">🇯🇵 日本語</button>
+    <button onclick="setUiLang('tr',this)">🇹🇷 Türkçe</button>
+  </div>
+
+  <header>
+    <div class="badge" id="badge">NLP · تحليل المشاعر</div>
+    <h1 id="mainTitle">محلل <span id="titleSpan">المشاعر</span></h1>
+    <p class="subtitle" id="subtitle">حلل مشاعر أي نص بأكثر من 20 لغة باستخدام الذكاء الاصطناعي</p>
+  </header>
+
+  <div class="card">
+    <div class="card-label" id="lblTextLang">لغة النص المُدخل</div>
+    <div class="text-lang-grid">
+      <button class="tlang-btn active" onclick="setTextLang('auto',this)">🌐 Auto</button>
+      <button class="tlang-btn" onclick="setTextLang('ar',this)">🇸🇦 العربية</button>
+      <button class="tlang-btn" onclick="setTextLang('en',this)">🇬🇧 English</button>
+      <button class="tlang-btn" onclick="setTextLang('fr',this)">🇫🇷 Français</button>
+      <button class="tlang-btn" onclick="setTextLang('es',this)">🇪🇸 Español</button>
+      <button class="tlang-btn" onclick="setTextLang('de',this)">🇩🇪 Deutsch</button>
+      <button class="tlang-btn" onclick="setTextLang('it',this)">🇮🇹 Italiano</button>
+      <button class="tlang-btn" onclick="setTextLang('pt',this)">🇧🇷 Português</button>
+      <button class="tlang-btn" onclick="setTextLang('ru',this)">🇷🇺 Русский</button>
+      <button class="tlang-btn" onclick="setTextLang('zh',this)">🇨🇳 中文</button>
+      <button class="tlang-btn" onclick="setTextLang('ja',this)">🇯🇵 日本語</button>
+      <button class="tlang-btn" onclick="setTextLang('ko',this)">🇰🇷 한국어</button>
+      <button class="tlang-btn" onclick="setTextLang('tr',this)">🇹🇷 Türkçe</button>
+      <button class="tlang-btn" onclick="setTextLang('nl',this)">🇳🇱 Nederlands</button>
+      <button class="tlang-btn" onclick="setTextLang('fa',this)">🇮🇷 فارسی</button>
+      <button class="tlang-btn" onclick="setTextLang('hi',this)">🇮🇳 हिंदी</button>
+      <button class="tlang-btn" onclick="setTextLang('he',this)">🇮🇱 עברית</button>
+      <button class="tlang-btn" onclick="setTextLang('uk',this)">🇺🇦 Українська</button>
+      <button class="tlang-btn" onclick="setTextLang('id',this)">🇮🇩 Indonesia</button>
+      <button class="tlang-btn" onclick="setTextLang('th',this)">🇹🇭 ภาษาไทย</button>
+    </div>
+
+    <div class="card-label" id="lblInputText">النص المراد تحليله</div>
+    <textarea id="inputText" rows="5" placeholder="اكتب أو الصق نصك هنا..."></textarea>
+
+    <div class="card-label" style="margin-top:16px;" id="lblExamples">أمثلة سريعة</div>
+    <div class="examples" id="examplesContainer"></div>
+
+    <button class="analyze-btn" id="analyzeBtn" onclick="analyze()">
+      <span id="btnText">🔍 تحليل المشاعر</span>
+    </button>
+    <div class="error-msg" id="errorMsg"></div>
+  </div>
+
+  <div class="loader" id="loader">
+    <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+    <span id="loadingText" style="color:var(--text-dim);font-size:14px;margin-right:8px;">جاري التحليل...</span>
+  </div>
+
+  <div class="result-card" id="resultCard">
+    <div class="card-label" id="lblResult">نتيجة التحليل</div>
+    <div class="sentiment-main">
+      <div class="sentiment-emoji" id="resEmoji">😊</div>
+      <div class="sentiment-info">
+        <div class="sentiment-label" id="resLabel"></div>
+        <div class="sentiment-sub" id="resSub"></div>
+      </div>
+    </div>
+    <div style="margin-bottom:24px;">
+      <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span id="lblPos" style="font-size:13px;color:var(--pos)">إيجابي</span><span id="posVal" style="font-family:'Space Mono',monospace;font-size:13px;color:var(--pos)">0%</span></div>
+      <div class="bar-wrap"><div class="bar-fill" id="posBar" style="background:var(--pos);width:0%"></div></div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span id="lblNeg" style="font-size:13px;color:var(--neg)">سلبي</span><span id="negVal" style="font-family:'Space Mono',monospace;font-size:13px;color:var(--neg)">0%</span></div>
+      <div class="bar-wrap"><div class="bar-fill" id="negBar" style="background:var(--neg);width:0%"></div></div>
+      <div style="display:flex;justify-content:space-between;margin-bottom:4px;"><span id="lblNeu" style="font-size:13px;color:var(--neu)">محايد</span><span id="neuVal" style="font-family:'Space Mono',monospace;font-size:13px;color:var(--neu)">0%</span></div>
+      <div class="bar-wrap"><div class="bar-fill" id="neuBar" style="background:var(--neu);width:0%"></div></div>
+    </div>
+    <div class="analysis-section"><h3 id="lblAnalysis">📊 التحليل التفصيلي</h3><p id="resAnalysis"></p></div>
+    <div class="analysis-section"><h3 id="lblKeywords">🔑 الكلمات المفتاحية</h3><div class="keywords" id="resKeywords"></div></div>
+    <div class="analysis-section"><h3 id="lblBusiness">💡 الاستخدام التجاري</h3><p id="resBusiness"></p></div>
+  </div>
+
+  <div class="history-section" id="historySection" style="display:none;">
+    <div class="history-title" id="historyTitle">// سجل التحليلات</div>
+    <div class="history-list" id="historyList"></div>
+  </div>
+
+  <footer><span id="footerBuilt">مبني بـ</span> <span>Claude AI + Flask</span> · <span id="footerSub">مشروع NLP</span></footer>
+</div>
+
+<script>
+const UI={ar:{dir:'rtl',lang:'ar',badge:'NLP · تحليل المشاعر',title:'محلل',titleSpan:'المشاعر',subtitle:'حلل مشاعر أي نص بأكثر من 20 لغة باستخدام الذكاء الاصطناعي',lblTextLang:'لغة النص المُدخل',lblInputText:'النص المراد تحليله',lblExamples:'أمثلة سريعة',placeholder:'اكتب أو الصق نصك هنا...',btnText:'🔍 تحليل المشاعر',loadingText:'جاري التحليل...',lblResult:'نتيجة التحليل',lblPos:'إيجابي',lblNeg:'سلبي',lblNeu:'محايد',lblAnalysis:'📊 التحليل التفصيلي',lblKeywords:'🔑 الكلمات المفتاحية',lblBusiness:'💡 الاستخدام التجاري',historyTitle:'// سجل التحليلات',footerBuilt:'مبني بـ',footerSub:'مشروع NLP',errEmpty:'⚠️ الرجاء إدخال نص للتحليل',errFail:'❌ حدث خطأ في السيرفر. تأكد من تشغيله.',responseLang:'Arabic',examples:[{text:'المنتج ممتاز والتوصيل سريع!',label:'إيجابي 😊'},{text:'خدمة سيئة لم تحل مشكلتي!',label:'سلبي 😠'},{text:'The product is okay, nothing special.',label:'محايد EN 😐'},{text:'Je suis très satisfait!',label:'إيجابي FR 🌟'},{text:'بعض الجوانب جيدة وأخرى سيئة',label:'مختلط 🤔'}]},en:{dir:'ltr',lang:'en',badge:'NLP · SENTIMENT ANALYSIS',title:'Sentiment',titleSpan:'Analyzer',subtitle:'Analyze the sentiment of any text in 20+ languages using AI',lblTextLang:'Input text language',lblInputText:'Text to analyze',lblExamples:'Quick examples',placeholder:'Type or paste your text here...',btnText:'🔍 Analyze Sentiment',loadingText:'Analyzing...',lblResult:'Analysis Result',lblPos:'Positive',lblNeg:'Negative',lblNeu:'Neutral',lblAnalysis:'📊 Detailed Analysis',lblKeywords:'🔑 Keywords',lblBusiness:'💡 Business Insight',historyTitle:'// ANALYSIS HISTORY',footerBuilt:'Built with',footerSub:'NLP Project',errEmpty:'⚠️ Please enter text to analyze.',errFail:'❌ Server error. Make sure the Flask server is running.',responseLang:'English',examples:[{text:'The product is amazing, fast delivery!',label:'Positive 😊'},{text:'Terrible service, never solved my issue!',label:'Negative 😠'},{text:'المنتج جيد لكن التوصيل بطيء',label:'Mixed AR 🤔'},{text:'Je suis très satisfait!',label:'Positive FR 🌟'},{text:'Das Produkt ist in Ordnung.',label:'Neutral DE 😐'}]},fr:{dir:'ltr',lang:'fr',badge:'NLP · ANALYSE DE SENTIMENT',title:'Analyseur de',titleSpan:'Sentiments',subtitle:"Analysez le sentiment de n'importe quel texte en 20+ langues",lblTextLang:'Langue du texte',lblInputText:'Texte à analyser',lblExamples:'Exemples',placeholder:'Tapez votre texte ici...',btnText:'🔍 Analyser',loadingText:'Analyse...',lblResult:'Résultat',lblPos:'Positif',lblNeg:'Négatif',lblNeu:'Neutre',lblAnalysis:'📊 Analyse',lblKeywords:'🔑 Mots-clés',lblBusiness:'💡 Usage commercial',historyTitle:'// HISTORIQUE',footerBuilt:'Créé avec',footerSub:'Projet NLP',errEmpty:'⚠️ Veuillez saisir un texte.',errFail:'❌ Erreur serveur. Vérifiez que Flask tourne.',responseLang:'French',examples:[{text:'Produit excellent, livraison rapide!',label:'Positif 😊'},{text:'Service horrible, problème non résolu!',label:'Négatif 😠'},{text:'The product is okay.',label:'Neutre EN 😐'},{text:'المنتج ممتاز!',label:'Positif AR 🌟'},{text:'Certains aspects bons, autres mauvais.',label:'Mixte 🤔'}]}};
+
+let currentUiLang='ar',selectedTextLang='auto';
+const analysisHistory=[];
+
+function setUiLang(lang,btn){
+  currentUiLang=lang;const t=UI[lang];
+  document.documentElement.lang=t.lang;document.documentElement.dir=t.dir;
+  document.querySelectorAll('#uiLangBar button').forEach(b=>b.classList.remove('active'));btn.classList.add('active');
+  document.getElementById('badge').textContent=t.badge;
+  document.getElementById('mainTitle').childNodes[0].nodeValue=t.title+' ';
+  document.getElementById('titleSpan').textContent=t.titleSpan;
+  document.getElementById('subtitle').textContent=t.subtitle;
+  document.getElementById('inputText').placeholder=t.placeholder;
+  document.getElementById('btnText').textContent=t.btnText;
+  document.getElementById('loadingText').textContent=t.loadingText;
+  document.getElementById('lblPos').textContent=t.lblPos;document.getElementById('lblNeg').textContent=t.lblNeg;document.getElementById('lblNeu').textContent=t.lblNeu;
+  document.getElementById('lblAnalysis').textContent=t.lblAnalysis;document.getElementById('lblKeywords').textContent=t.lblKeywords;document.getElementById('lblBusiness').textContent=t.lblBusiness;
+  document.getElementById('historyTitle').textContent=t.historyTitle;document.getElementById('footerBuilt').textContent=t.footerBuilt;document.getElementById('footerSub').textContent=t.footerSub;
+  ['lblTextLang','lblInputText','lblExamples','lblResult'].forEach(id=>{
+    const labels={lblTextLang:t.lblTextLang,lblInputText:t.lblInputText,lblExamples:t.lblExamples,lblResult:t.lblResult};
+    document.getElementById(id).innerHTML=`<span style="width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block"></span> ${labels[id]}`;
+  });
+  renderExamples();
+}
+
+function renderExamples(){
+  const c=document.getElementById('examplesContainer');c.innerHTML='';
+  UI[currentUiLang].examples.forEach(ex=>{const s=document.createElement('span');s.className='example-chip';s.textContent=ex.label;s.onclick=()=>{document.getElementById('inputText').value=ex.text;};c.appendChild(s);});
+}
+
+function setTextLang(lang,btn){selectedTextLang=lang;document.querySelectorAll('.tlang-btn').forEach(b=>b.classList.remove('active'));btn.classList.add('active');}
+
+async function analyze(){
+  const t=UI[currentUiLang];
+  const text=document.getElementById('inputText').value.trim();
+  if(!text){showError(t.errEmpty);return;}
+  const btn=document.getElementById('analyzeBtn');const loader=document.getElementById('loader');
+  btn.disabled=true;loader.classList.add('active');
+  document.getElementById('resultCard').classList.remove('visible');document.getElementById('errorMsg').classList.remove('visible');
+  try{
+    // 🔑 الطلب يذهب إلى Backend (Flask) - المفتاح آمن على السيرفر
+    const res=await fetch('/api/analyze',{method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({text,text_lang:selectedTextLang,response_lang:t.responseLang})});
+    const result=await res.json();
+    if(!res.ok)throw new Error(result.error||'Server error');
+    displayResult(result,text);addToHistory(result,text);
+  }catch(err){showError(t.errFail+' ('+err.message+')');}
+  finally{btn.disabled=false;loader.classList.remove('active');}
+}
+
+function displayResult(r,text){
+  document.getElementById('resEmoji').textContent=r.emoji;
+  document.getElementById('resLabel').textContent=r.label;document.getElementById('resLabel').className=`sentiment-label ${r.sentiment}`;
+  document.getElementById('resSub').textContent=(r.detected_lang?`🌐 ${r.detected_lang}  ·  `:'')+r.sub;
+  document.getElementById('resAnalysis').textContent=r.analysis;document.getElementById('resBusiness').textContent=r.business;
+  setTimeout(()=>{
+    document.getElementById('posBar').style.width=r.scores.positive+'%';document.getElementById('negBar').style.width=r.scores.negative+'%';document.getElementById('neuBar').style.width=r.scores.neutral+'%';
+    document.getElementById('posVal').textContent=r.scores.positive+'%';document.getElementById('negVal').textContent=r.scores.negative+'%';document.getElementById('neuVal').textContent=r.scores.neutral+'%';
+  },80);
+  const kw=document.getElementById('resKeywords');kw.innerHTML='';
+  (r.keywords||[]).forEach(k=>{const s=document.createElement('span');s.className=`keyword ${k.type}`;s.textContent=k.word;kw.appendChild(s);});
+  document.getElementById('resultCard').classList.add('visible');
+}
+
+function addToHistory(r,text){
+  analysisHistory.unshift({result:r,text});if(analysisHistory.length>6)analysisHistory.pop();
+  document.getElementById('historySection').style.display='block';
+  const list=document.getElementById('historyList');list.innerHTML='';
+  analysisHistory.forEach(item=>{const div=document.createElement('div');div.className='history-item';div.innerHTML=`<span class="history-emoji">${item.result.emoji}</span><span class="history-text">${item.text}</span><span class="history-sentiment ${item.result.sentiment}">${item.result.label}</span>`;div.onclick=()=>{document.getElementById('inputText').value=item.text;displayResult(item.result,item.text);};list.appendChild(div);});
+}
+
+function showError(msg){const el=document.getElementById('errorMsg');el.textContent=msg;el.classList.add('visible');}
+renderExamples();
+document.addEventListener('keydown',e=>{if(e.ctrlKey&&e.key==='Enter')analyze();});
+</script>
+</body>
+</html>