Hugging Face's logo

Spaces:
SrishtiMehta
/
SafeStream_AI
Configuration error

App Files Community
4
SafeStream_AI
File size: 4,572 Bytes
51334f9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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>