Technologia2/stage2.html at main · SIG-AI-OpenSource/Technologia2 · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Prompt Compression Game</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(to right, #141e30, #243b55);
      min-height: 100vh;
    }

    /* HEADER */
    header {
      width: 100%;
      height: 80px;
      background: rgba(6, 17, 31, 0.85);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      overflow: hidden;
    }

    header img {
      height: 60px;
      width: auto;
    }

    /* MAIN CONTENT */
    .container {
      max-width: 700px;
      margin: 100px auto 30px;
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    h1, h2 {
      text-align: center;
      color: #333;
    }

    .prompt-box {
      margin-bottom: 25px;
      padding: 15px;
      border-left: 4px solid #007BFF;
      background: #f9f9f9;
      border-radius: 8px;
    }

    textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      resize: vertical;
      min-height: 80px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #ccc;
    }

    button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 20px;
      transition: 0.3s;
    }

    button:hover {
      background-color: #0056b3;
    }

    .score {
      color: green;
      font-weight: bold;
      margin-top: 8px;
    }
  </style>
</head>
<body>

<header>
    <img src="./images/logo1.png" alt="Left">
    <img src="./images/logo2.png" alt="Center">
    <img src="./images/logo3.png" alt="Right">
</header>

<div class="container">
  <h1>📝 Prompt Compression Challenge</h1>

  <div class="prompt-box" id="prompt1">
    <p><strong>Prompt 1:</strong> <span class="prompt-text"></span></p>
    <textarea placeholder="Enter your compressed prompt..."></textarea>
    <p class="score">Score: 0</p>
  </div>

  <div class="prompt-box" id="prompt2">
    <p><strong>Prompt 2:</strong> <span class="prompt-text"></span></p>
    <textarea placeholder="Enter your compressed prompt..."></textarea>
    <p class="score">Score: 0</p>
  </div>

  <div class="prompt-box" id="prompt3">
    <p><strong>Prompt 3:</strong> <span class="prompt-text"></span></p>
    <textarea placeholder="Enter your compressed prompt..."></textarea>
    <p class="score">Score: 0</p>
  </div>

  <button onclick="calculateScore()">Submit</button>
  <button id="nextBtn" onclick="goToNextStage()" disabled>Next Stage</button>
  <h2 id="totalScore">Total Score: 0</h2>
  <button onclick="goBack()">⬅ Back</button>
</div>

<script>

  function goBack() {
    if (window.history.length > 1) {
      window.history.back();
    } else {
      window.location.href = "index.html"; // fallback page
    }
  }

  // Reset stage if needed
  const params = new URLSearchParams(window.location.search);
  if (params.get("reset") === "true") {
    localStorage.removeItem("stage2_completed");
    localStorage.removeItem("stage2_score");
  }

  // Original prompts from your first version
  const allPrompts = [
    "A student develops an app that tracks study hours and uses AI to suggest breaks and focus music based on stress patterns and typing speed.",
    "A small-town school adopts an AI tool that gives essay feedback, improving grammar and clarity while adapting to individual student writing styles.",
    "A refrigerator uses machine learning to track items, warn about expirations, and suggest recipes based on what's inside.",
    "A language app listens to your accent, corrects pronunciation in real-time, and personalizes lessons based on vocabulary struggles.",
    "An AI-powered wearable helps visually impaired students by speaking out text, faces, and objects it sees in real-time.",
    "An online classroom platform uses ML to track participation and remind teachers about students who need extra attention.",
    "A wearable band detects early signs of fatigue using AI, predicting low-energy days and notifying caregivers if needed.",
    "A teen builds a robot that recognizes trash using a camera and AI, then picks it up and avoids people on the sidewalk.",
    "A library installs a recommendation engine that suggests books based on students’ past borrowing and trending reads in other schools.",
    "A transport app learns your schedule and uses ML to suggest the best departure time avoiding traffic and weather delays.",
    "A university research assistant tool reads thousands of papers and summarizes the key points to speed up student learning.",
    "A student game involves training an AI pet using voice. The pet adapts to your habits and reacts to mood changes.",
    "A mobile app asks daily wellness questions and uses tone analysis to send uplifting quotes, music, or meditation guides.",
    "A note-taking tool listens during lectures and summarizes key insights, highlighting topics based on earlier confusion patterns.",
    "An AI internship advisor matches students to job openings by analyzing resumes, projects, and preferred industries over time."
  ];

  let selectedPrompts = [];
  let hasSubmitted = false;

  function getThreeRandomPrompts() {
    const shuffled = [...allPrompts].sort(() => 0.5 - Math.random());
    return shuffled.slice(0, 3);
  }

  function populatePrompts() {
    selectedPrompts = getThreeRandomPrompts();
    const promptTexts = document.querySelectorAll('.prompt-text');
    promptTexts.forEach((el, i) => {
      el.textContent = selectedPrompts[i];
    });
  }

  function calculateCompressionScore(original, compressed) {
    const originalLength = original.length;
    const compressedLength = compressed.length;

    if (compressedLength === 0 || compressedLength >= originalLength) return 0;

    const compression = (1 - compressedLength / originalLength) * 50;
    return Math.max(0, Math.min(50, compression.toFixed(2)));
  }

  function calculateScore() {
    if (hasSubmitted) {
      alert("You've already submitted!");
      return;
    }

    let totalScore = 0;
    const promptBoxes = document.querySelectorAll(".prompt-box");

    promptBoxes.forEach((box, index) => {
      const textarea = box.querySelector("textarea");
      const userCompressed = textarea.value.trim();
      const scoreElement = box.querySelector(".score");

      if (!userCompressed) {
        alert(`Please enter a compressed version for Prompt ${index + 1}`);
        return;
      }

      const score = calculateCompressionScore(selectedPrompts[index], userCompressed);
      scoreElement.textContent = `Score: ${score}`;
      totalScore += parseFloat(score);
    });

    document.getElementById("totalScore").textContent = `Total Score: ${totalScore.toFixed(2)}`;
    hasSubmitted = true;

    // Enable next button
    document.getElementById("nextBtn").disabled = false;
    localStorage.setItem("stage2_completed", "true");
    localStorage.setItem("stage2_score", totalScore);
  }

  function goToNextStage() {
    window.location.replace("stage3.html");
  }

  window.onload = populatePrompts;

</script>

</body>
</html>