buildathoncc/frontend.html at main · Geethz-Dev/buildathoncc · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ConsentClear AI Analyzer</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: auto; }
    h1 { text-align: center; }
    input[type="file"] { margin-top: 10px; }
    button { margin-top: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer; }
    .results { margin-top: 20px; }
    .category { margin-bottom: 15px; }
    .safe { color: green; }
    .warning { color: orange; }
    .threat { color: red; }
    pre { background: #f4f4f4; padding: 10px; overflow-x: auto; }
  </style>
</head>
<body>

<h1>ConsentClear AI Analyzer</h1>

<form id="uploadForm">
  <label for="file">Select PDF or Image:</label>
  <input type="file" id="file" name="file" required>
  <br>
  <button type="submit">Analyze</button>
</form>

<div class="results" id="results" style="display:none;">
  <h2>Extracted Text:</h2>
  <pre id="extractedText"></pre>

  <h2>AI Summary:</h2>
  <pre id="aiSummary"></pre>

  <div class="category" id="safeSection">
    <h3 class="safe">✅ Safe Points:</h3>
    <ul id="safeList"></ul>
  </div>

  <div class="category" id="warningSection">
    <h3 class="warning">⚠️ Warning Points:</h3>
    <ul id="warningList"></ul>
  </div>

  <div class="category" id="threatSection">
    <h3 class="threat">❌ Threat Points:</h3>
    <ul id="threatList"></ul>
  </div>
</div>

<script>
  const form = document.getElementById('uploadForm');
  const resultsDiv = document.getElementById('results');
  const extractedTextEl = document.getElementById('extractedText');
  const aiSummaryEl = document.getElementById('aiSummary');
  const safeListEl = document.getElementById('safeList');
  const warningListEl = document.getElementById('warningList');
  const threatListEl = document.getElementById('threatList');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const fileInput = document.getElementById('file');
    if (!fileInput.files.length) return alert("Please select a file.");

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);

    // Reset previous results
    resultsDiv.style.display = 'none';
    extractedTextEl.textContent = '';
    aiSummaryEl.textContent = '';
    safeListEl.innerHTML = '';
    warningListEl.innerHTML = '';
    threatListEl.innerHTML = '';

    try {
      const response = await fetch('/analyze', {
        method: 'POST',
        body: formData
      });

      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

      const data = await response.json();

      extractedTextEl.textContent = data.extracted_text;
      aiSummaryEl.textContent = data.ai_summary;

      data.classification.safe.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        safeListEl.appendChild(li);
      });

      data.classification.warning.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        warningListEl.appendChild(li);
      });

      data.classification.threat.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        threatListEl.appendChild(li);
      });

      resultsDiv.style.display = 'block';
    } catch (err) {
      alert("Error analyzing file: " + err.message);
    }
  });
</script>

</body>
</html>