Hugging Face's logo

Spaces:
cahya
/
persona-chatbot
Runtime error

App Files Community
persona-chatbot
File size: 6,131 Bytes 
592e78e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>GPT2 Persona Chatbot</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">
  <link rel="stylesheet" href="css/chatbot.css">
</head>

<body onload="pageSetup();">
  <div id="chatbox">
    <div id="friendslist">
      <div id="topmenu">
        <span class="friends"></span>
        <span class="chats"></span>
        <span class="history"></span>
      </div>

      <div id="friends">
      </div>

      <div id="search">
        <input type="text" id="searchfield" value="Search contacts..." />
      </div>

    </div>

    <div id="chatview" class="p1">
      <div id="profile">
        <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
          <li id="close"><i class="fas fa-solid fa-house-chimney"></i></li>
          <li id="personalities"><i class="fas fa-solid fa-address-card"></i></li>
          <li id="parameters"><i class="fas fa-solid fa-sliders"></i></li>
          <li id="about"><i class="fas fa-solid fa-info"></i></li>
        </ul>

        <p>Miro Badev</p>
        <span>miro@badev@gmail.com</span>
      </div>

      <div id="chat-block">
        <div></div>

        <div id="sendmessage">
          <input type="text" value="Send message..." class="user-input"/>
          <button id="send" class="user-input-button"></button>
        </div>
      </div>
      <div id="config-block">
        <div id="personalities_view" class="bot-personality">
          <h3>Personalities</h3>
          <div>
            <label for="inputPersonality1" class="col-form-label"></label>
            <input type="text" class="effect-10" id="inputPersonality1">
            <span class="focus-bg"></span>
          </div>
          <div>
            <label for="inputPersonality2" class="col-form-label"></label>
            <input type="text" class="form-control" id="inputPersonality2">
          </div>
          <div>
            <label for="inputPersonality3" class="col-form-label"></label>
            <input type="text" class="form-control" id="inputPersonality3">
          </div>
          <div>
            <label for="inputPersonality4" class="col-form-label"></label>
            <input type="text" class="form-control" id="inputPersonality4">
          </div>
          <div>
            <label for="inputPersonality5" class="col-form-label"></label>
            <input type="text" class="form-control" id="inputPersonality5">
          </div>
          <div id="personalities_button">
            <button id="personalities_cancel">Cancel</button>
            <button id="personalities_update">Update</button>
          </div>
        </div>

        <div id="parameters_view" class="">
          <h3>Parameters</h3>
          <div class="form-check">
            <label class="form-check-label" for="doSample">
              Do Sample
            </label>
            <input class="form-check-input" type="checkbox" value="" id="doSample" checked>
          </div>
          <div>
            <label for="minLength" class="form-label">Minimal Length: <span id="minLengthValue">1</span></label>
            <input type="range" class="form-range" min="1" max="10" value="1" id="minLength" onmousemove="updateValue('minLengthValue', this.value);">
          </div>
          <div>
            <label for="maxLength" class="form-label">Maximal Length: <span id="maxLengthValue">20</span></label>
            <input type="range" class="form-range" min="20" max="50" value="20" id="maxLength" onmousemove="updateValue('maxLengthValue', this.value);">
          </div>
          <div>
            <label for="temperature" class="form-label">Temperature: <span id="temperatureValue">0.7</span></label>
            <input type="range" class="form-range" min="0.1" max="1.0" value="0.7" step="0.1" id="temperature" onmousemove="updateValue('temperatureValue', this.value);">
          </div>
          <div>
            <label for="topK" class="form-label">Top k: <span id="topKValue">20</span></label>
            <input type="range" class="form-range" min="0" max="50" value="20" id="topK" onmousemove="updateValue('topKValue', this.value);">
          </div>
          <div>
            <label for="topP" class="form-label">Top p: <span id="topPValue">0.9</span></label>
            <input type="range" class="form-range" min="0.1" max="1.0" value="0.9" step="0.01" id="topP" onmousemove="updateValue('topPValue', this.value);">
          </div>
          <div id="parameters_button">
            <button id="parameters_ok">Ok</button>
          </div>
        </div>

        <div id="about_view" class="">
          <div class="">
            <h3>Persona Chatbot</h3>
            <div>
              <span>Created by <a href="https://www.linkedin.com/in/cahyawirawan/">Cahya Wirawan</a></span>
            </div>
            <div>
              <span>The Model is based on Huggingface's</span>
              <span><a href="https://medium.com/huggingface/how-to-build-a-state-of-the-art-conversational-ai-with-transfer-learning-2d818ac26313">Conversational AI with Transfer Learning</a></span>
            </div>
            <div>
              <span>UI Design is based on</span>
              <span><a href="https://codepen.io/virgilpana/pen/ZYZXgP">"A Pen by Virgin Pana"</a></span>
            </div>
            <div>
              <span>The personal photos were generated by </span>
              <span><a href="https://generated.photos/">Generated Photos</a></span>
            </div>
            <div id="about_button">
              <button id="about_close">Close</button>
            </div>
          </div>
        </div>
        <div id="server_view">
          <span class="server-message-value">Server</span>
        </div>
      </div>
      <div id="photo-block">
        <img src=""/>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="js/chatbot.js"></script>
</body>