customizing-personality/UI_export.html at main · SeboLab/customizing-personality · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Customize Your Robot’s Personality</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='UI.css') }}">
</head>
<body>
  <div class="container">
    <h1>Customize Your Robot’s Personality</h1>

    <div class="trait">
      <label for="openness"></label>
      <div>
        <input type="range" id="openness" min="0" max="2" value="1" />
        <div class="slider-labels">
          <span>Practical &amp;<br>Traditional</span>
          <span>Medium</span>
          <span>Creative &amp;<br>Adventurous</span>
        </div>
      </div>
    </div>

    <div class="trait">
      <label for="conscientiousness"></label>
      <div>
        <input type="range" id="conscientiousness" min="0" max="2" value="1" />
        <div class="slider-labels">
          <span>Spontaneous &amp;<br> Easygoing</span>
          <span>Medium</span>
          <span>Careful &amp;<br> Detail-Oriented</span>
        </div>
      </div>
    </div>

    <div class="trait">
      <label for="extraversion"></label>
      <div>
        <input type="range" id="extraversion" min="0" max="2" value="1" />
        <div class="slider-labels">
          <span>Quiet &amp;<br> Reserved</span>
          <span>Medium</span>
          <span>Talkative &amp;<br> Enthusiastic</span>
        </div>
      </div>
    </div>

    <div class="trait">
      <label for="agreeableness"></label>
      <div>
        <input type="range" id="agreeableness" min="0" max="2" value="1" />
        <div class="slider-labels">
          <span>Blunt &amp;<br> Independent</span>
          <span>Medium</span>
          <span>Kind &amp;<br> Supportive</span>
        </div>
      </div>
    </div>

    <div class="trait">
      <label for="emotionalStability"></label>
      <div>
        <input type="range" id="emotionalStability" min="0" max="2" value="1" />
        <div class="slider-labels">
          <span>Relaxed &amp;<br> Even-Tempered</span>
          <span>Medium</span>
          <span>Sensitive &amp;<br> Reactive</span>
        </div>
      </div>
    </div>

    <button onclick="submitForm()">Submit</button>
  </div>

  <script>
    function submitForm() {
      const descriptions = {
        openness: ["Low (Practical & Traditional)", "Medium", "High (Creative & Adventurous)"],
        conscientiousness: ["Low (Spontaneous & Easygoing)", "Medium", "High (Careful & Detail-Oriented)"],
        extraversion: ["Low (Quiet & Reserved)", "Medium", "High (Talkative & Enthusiastic)"],
        agreeableness: ["Low (Blunt & Independent)", "Medium", "High (Kind & Supportive)"],
        emotionalStability: ["Low (Relaxed & Even-Tempered)", "Medium", "High (Sensitive & Reactive)"]
      };

      const payload = {};
      for (const id in descriptions) {
        const value = parseInt(document.getElementById(id).value);
        payload[id] = descriptions[id][value];
      }

      fetch('/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      })
      .then(res => res.json())
      .then(json => {
        if (json.status === 'success') {
          alert(`Settings saved on server as ${json.filename}`);
        } else {
          alert('Error saving on server.');
        }
      })
      .catch(() => alert('Network or server error.'));
    }
  </script>
</body>
</html>