first commit

app.py

@@ -0,0 +1,40 @@
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi import Request
+import uvicorn
+
+app = FastAPI()
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+templates = Jinja2Templates(directory="templates")
+
+# Frontend route
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+# Your moderation endpoint (example)
+@app.post("/moderate")
+async def moderate(data: dict):
+    text = data.get("text", "")
+
+    # 🔥 Replace with your real model logic
+    return {
+        "decision": "flag",
+        "confidence": 0.85,
+        "explanation": "Potentially harmful content detected",
+        "ai_scores": {
+            "toxicity": 0.8,
+            "insult": 0.6,
+            "threat": 0.7,
+            "obscene": 0.5
+        }
+    }
+
+# Run locally
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,3 @@
+fastapi
+uvicorn
+jinja2

static/script.js

@@ -0,0 +1,149 @@
+let total = 0, allowedCount = 0, removedCount = 0, confSum = 0;
+http
+function now() {
+  const d = new Date();
+  return d.getHours().toString().padStart(2, '0') + ':' +
+    d.getMinutes().toString().padStart(2, '0');
+}
+
+async function analyze() {
+  const text = document.getElementById('inputText').value.trim();
+  if (!text) return;
+
+  const btn = document.getElementById('analyzeBtn');
+  btn.disabled = true;
+  btn.innerHTML = '<span class="loading-dots">Analyzing</span>';
+
+  const resultsWrap = document.getElementById('resultsWrap');
+  resultsWrap.style.display = 'block';
+
+  document.getElementById('explText').innerHTML =
+    '<span class="loading-dots">Analyzing content</span>';
+  document.getElementById('decisionBadge').className = 'decision-badge';
+  document.getElementById('decisionBadge').textContent = '';
+  document.getElementById('scoresContainer').innerHTML = '';
+
+  try {
+    const res = await fetch("/moderate", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ text })
+    });
+
+    if (!res.ok) {
+      throw new Error("Server error");
+    }
+
+    const result = await res.json();
+
+    if (!result || !result.ai_scores) {
+      throw new Error("Invalid response format");
+    }
+
+    renderResult(result, text);
+
+  } catch (e) {
+    console.error(e);
+    document.getElementById('explText').textContent =
+      'Error analyzing content. Check backend.';
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = `
+      <svg class="shield-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+      </svg> Analyze Content
+    `;
+  }
+}
+
+function renderResult(r, text) {
+  const conf = Math.round(r.confidence * 100);
+
+  const badge = document.getElementById('decisionBadge');
+  const icons = { allow: '✓', flag: '⚠', remove: '✕', review: 'ℹ' };
+
+  badge.className = 'decision-badge badge-' + r.decision;
+  badge.textContent =
+    (icons[r.decision] || '') + ' ' + r.decision.toUpperCase();
+
+  document.getElementById('explText').textContent = r.explanation;
+  document.getElementById('metaDecision').textContent = r.decision;
+  document.getElementById('metaConf').textContent = conf + '%';
+
+  const sc = r.ai_scores;
+
+  const labels = ['Toxicity', 'Insult', 'Threat', 'Obscene'];
+  const keys = ['toxicity', 'insult', 'threat', 'obscene'];
+
+  document.getElementById('scoresContainer').innerHTML = keys.map((k, i) => {
+    const val = sc[k] || 0;
+    const pct = Math.round(val * 100);
+
+    const cls =
+      pct >= 60 ? 'fill-high' :
+        pct >= 30 ? 'fill-mid' :
+          'fill-low';
+
+    return `
+      <div class="score-row">
+        <div class="score-header">
+          <span>${labels[i]}</span>
+          <span>${pct}%</span>
+        </div>
+        <div class="score-bar">
+          <div class="score-fill ${cls}" style="width:${pct}%"></div>
+        </div>
+      </div>
+    `;
+  }).join('');
+
+  /* STATS */
+  total++;
+  if (r.decision === 'allow') allowedCount++;
+  if (r.decision === 'remove') removedCount++;
+
+  confSum += r.confidence;
+
+  document.getElementById('stat-total').textContent = total;
+  document.getElementById('stat-allowed').textContent = allowedCount;
+  document.getElementById('stat-removed').textContent = removedCount;
+
+  document.getElementById('stat-allowed-pct').textContent =
+    Math.round((allowedCount / total) * 100) + '% of total';
+
+  document.getElementById('stat-removed-pct').textContent =
+    Math.round((removedCount / total) * 100) + '% of total';
+
+  document.getElementById('stat-conf').textContent =
+    Math.round((confSum / total) * 100) + '%';
+
+  /* HISTORY */
+  const list = document.getElementById('historyList');
+  const empty = list.querySelector('.empty-history');
+  if (empty) empty.remove();
+
+  const item = document.createElement('div');
+  item.className = 'history-item';
+
+  item.innerHTML = `
+    <div>
+      <div class="h-badge h-${r.decision}">
+        ${(r.decision === 'allow' ? '✓ ' :
+          r.decision === 'remove' ? '✕ ' : '⚠ ')
+        + r.decision.toUpperCase()}
+      </div>
+      <div class="history-text">
+        ${text.length > 80 ? text.slice(0, 80) + '…' : text}
+      </div>
+    </div>
+    <div class="history-time">${now()}</div>
+  `;
+
+  list.prepend(item);
+}
+
+document.getElementById('inputText').addEventListener('keydown', e => {
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) analyze();
+});

static/styles.css

@@ -0,0 +1,453 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0
+}
+
+body {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  background: #0B132B;
+  color: #fff;
+  min-height: 100vh
+}
+
+/* HEADER */
+.header {
+  padding: 18px 32px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+/* LOGO */
+.logo {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: #dbeafe;
+  padding: 4px;
+}
+
+/* TITLE */
+.title {
+  font-size: 26px;
+  font-weight: 700;
+  background: linear-gradient(90deg, #4F7DF3, #3FB6B2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* GRADIENT BAR */
+.gradient-bar {
+  height: 3px;
+  background: linear-gradient(90deg, #5A3E8B, #3A6EA5, #3FB6B2);
+  width: 100%
+}
+
+/* STATS */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 24px 32px
+}
+
+.stat-card {
+  background: #132040;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 12px;
+  padding: 20px 24px
+}
+
+.stat-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: #7A8BAA;
+  text-transform: uppercase;
+  margin-bottom: 12px
+}
+
+.stat-label svg {
+  opacity: 0.6
+}
+
+.stat-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: #fff;
+  line-height: 1
+}
+
+.stat-sub {
+  font-size: 12px;
+  color: #7A8BAA;
+  margin-top: 6px
+}
+
+/* ANALYZER SECTION */
+.analyzer-wrap {
+  margin: 0 32px 24px;
+  background: linear-gradient(135deg, rgba(90, 62, 139, 0.15), rgba(58, 110, 165, 0.15));
+  border: 1px solid rgba(90, 62, 139, 0.4);
+  border-radius: 16px;
+  padding: 28px
+}
+
+.section-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  margin-bottom: 6px
+}
+
+.section-sub {
+  font-size: 14px;
+  color: #7A8BAA;
+  margin-bottom: 20px
+}
+
+textarea {
+  width: 100%;
+  height: 140px;
+  background: #0B132B;
+  border: 1px solid rgba(58, 110, 165, 0.5);
+  border-radius: 10px;
+  color: #fff;
+  font-family: monospace;
+  font-size: 14px;
+  padding: 14px;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.2s
+}
+
+textarea:focus {
+  border-color: #3A6EA5
+}
+
+textarea::placeholder {
+  color: #3A5070
+}
+
+.btn-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px
+}
+
+.analyze-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #3A6EA5, #3FB6B2);
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: opacity 0.2s
+}
+
+.analyze-btn:hover {
+  opacity: 0.9
+}
+
+.analyze-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed
+}
+
+.shield-icon {
+  width: 18px;
+  height: 18px
+}
+
+/* RESULTS */
+.results-wrap {
+  margin: 0 32px 24px;
+  background: #132040;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 16px;
+  padding: 28px;
+  display: none
+}
+
+.results-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px
+}
+
+.results-title {
+  font-size: 18px;
+  font-weight: 600
+}
+
+.decision-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  padding: 6px 14px;
+  border-radius: 20px;
+  border: 1.5px solid
+}
+
+.badge-allow {
+  color: #3FB6B2;
+  border-color: #3FB6B2;
+  background: rgba(63, 182, 178, 0.1)
+}
+
+.badge-flag {
+  color: #FFD166;
+  border-color: #FFD166;
+  background: rgba(255, 209, 102, 0.1)
+}
+
+.badge-remove {
+  color: #EF476F;
+  border-color: #EF476F;
+  background: rgba(239, 71, 111, 0.1)
+}
+
+.badge-review {
+  color: #74B3F4;
+  border-color: #74B3F4;
+  background: rgba(116, 179, 244, 0.1)
+}
+
+.results-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px
+}
+
+.explanation-box {}
+
+.expl-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  color: #7A8BAA;
+  text-transform: uppercase;
+  margin-bottom: 10px
+}
+
+.expl-text {
+  font-size: 14px;
+  color: #B0BFD8;
+  line-height: 1.6;
+  margin-bottom: 16px
+}
+
+.meta-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px
+}
+
+.meta-card {
+  background: #0B132B;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 14px
+}
+
+.meta-key {
+  font-size: 11px;
+  color: #7A8BAA;
+  margin-bottom: 4px
+}
+
+.meta-val {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fff
+}
+
+.scores-box {}
+
+.score-row {
+  margin-bottom: 14px
+}
+
+.score-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #B0BFD8;
+  margin-bottom: 6px
+}
+
+.score-bar {
+  height: 6px;
+  background: #1E3050;
+  border-radius: 3px;
+  overflow: hidden
+}
+
+.score-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.6s ease
+}
+
+.fill-low {
+  background: #3FB6B2
+}
+
+.fill-mid {
+  background: #FFD166
+}
+
+.fill-high {
+  background: #EF476F
+}
+
+/* HISTORY */
+.history-wrap {
+  margin: 0 32px 32px;
+  background: #132040;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 16px;
+  padding: 28px
+}
+
+.history-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 20px
+}
+
+.history-item {
+  background: #0B132B;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px
+}
+
+.history-item:last-child {
+  margin-bottom: 0
+}
+
+.history-text {
+  font-family: monospace;
+  font-size: 13px;
+  color: #B0BFD8;
+  flex: 1;
+  margin-top: 2px
+}
+
+.history-time {
+  font-size: 12px;
+  color: #7A8BAA;
+  white-space: nowrap
+}
+
+.h-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  padding: 4px 10px;
+  border-radius: 20px;
+  margin-bottom: 6px;
+  border: 1px solid
+}
+
+.h-allow {
+  color: #3FB6B2;
+  border-color: #3FB6B2;
+  background: rgba(63, 182, 178, 0.12)
+}
+
+.h-flag {
+  color: #FFD166;
+  border-color: #FFD166;
+  background: rgba(255, 209, 102, 0.12)
+}
+
+.h-remove {
+  color: #EF476F;
+  border-color: #EF476F;
+  background: rgba(239, 71, 111, 0.12)
+}
+
+.h-review {
+  color: #74B3F4;
+  border-color: #74B3F4;
+  background: rgba(116, 179, 244, 0.12)
+}
+
+.empty-history {
+  color: #7A8BAA;
+  font-size: 14px;
+  text-align: center;
+  padding: 20px 0
+}
+
+.loading-dots::after {
+  content: '...';
+  animation: dots 1.2s steps(4, end) infinite
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    content: '.'
+  }
+
+  40% {
+    content: '..'
+  }
+
+  60%,
+  100% {
+    content: '...'
+  }
+}
+
+@media(max-width:700px) {
+  .stats {
+    grid-template-columns: repeat(2, 1fr)
+  }
+
+  .results-grid {
+    grid-template-columns: 1fr
+  }
+
+  .stats,
+  .analyzer-wrap,
+  .results-wrap,
+  .history-wrap {
+    margin-left: 16px;
+    margin-right: 16px
+  }
+}

templates/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>SafeStream AI</title>
+  <link rel="stylesheet" href="/static/styles.css" />
+</head>
+
+<body>
+
+  <div class="header">
+    <div class="brand">
+      <img src="/static/logo.jpeg" class="logo" />
+      <h1 class="title">SafeStream AI</h1>
+    </div>
+  </div>
+  <div class="gradient-bar"></div>
+
+  <div class="stats">
+    <div class="stat-card">
+      <div class="stat-label">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+        </svg>
+        Total Analyzed
+      </div>
+      <div class="stat-value" id="stat-total">0</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3FB6B2" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+        Allowed
+      </div>
+      <div class="stat-value" id="stat-allowed">0</div>
+      <div class="stat-sub" id="stat-allowed-pct">0% of total</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF476F" stroke-width="2">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="15" y1="9" x2="9" y2="15" />
+          <line x1="9" y1="9" x2="15" y2="15" />
+        </svg>
+        Removed
+      </div>
+      <div class="stat-value" id="stat-removed">0</div>
+      <div class="stat-sub" id="stat-removed-pct">0% of total</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-label">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="20" x2="18" y2="10" />
+          <line x1="12" y1="20" x2="12" y2="4" />
+          <line x1="6" y1="20" x2="6" y2="14" />
+        </svg>
+        Avg Confidence
+      </div>
+      <div class="stat-value" id="stat-conf">0%</div>
+    </div>
+  </div>
+
+  <div class="analyzer-wrap">
+    <div class="section-title">Analyze Content</div>
+    <div class="section-sub">Enter text to scan for toxicity, threats, and policy violations.</div>
+    <textarea id="inputText" placeholder="Paste comment, message, or post text here..."></textarea>
+    <div class="btn-row">
+      <button class="analyze-btn" id="analyzeBtn" onclick="analyze()">
+        <svg class="shield-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+        Analyze Content
+      </button>
+    </div>
+  </div>
+
+  <div class="results-wrap" id="resultsWrap">
+    <div class="results-header">
+      <div class="results-title">Analysis Results</div>
+      <div class="decision-badge" id="decisionBadge"></div>
+    </div>
+    <div class="results-grid">
+      <div class="explanation-box">
+        <div class="expl-label">Explanation</div>
+        <div class="expl-text" id="explText"></div>
+        <div class="meta-row">
+          <div class="meta-card">
+            <div class="meta-key">RL Decision</div>
+            <div class="meta-val" id="metaDecision"></div>
+          </div>
+          <div class="meta-card">
+            <div class="meta-key">Confidence</div>
+            <div class="meta-val" id="metaConf"></div>
+          </div>
+        </div>
+      </div>
+      <div class="scores-box">
+        <div class="expl-label" style="display:flex;align-items:center;gap:8px">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+          </svg>
+          AI Scores
+        </div>
+        <div id="scoresContainer"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="history-wrap">
+    <div class="history-title">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="12 6 12 12 16 14" />
+      </svg>
+      Recent History
+    </div>
+    <div id="historyList">
+      <div class="empty-history">No analyses yet. Submit some content above to get started.</div>
+    </div>
+  </div>
+
+  <script src="/static/script.js"></script>
+</body>
+
+</html>