-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathindex.html
153 lines (148 loc) · 10.1 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./app/libs/bootsrap.min.css">
<link rel="stylesheet" href="./app/styles.css">
<script src="./app/libs/jquery.min.js"></script>
<title>Ava Chat</title>
</head>
<body>
<div class="container main">
<div class="theme-btn">
<button class="rounded-pill btn" id="theme-btn"> 🌗</button>
</div>
<div class="toggleLeft">
<svg class="toggle-btn m-2" id="toggleLeft" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8Zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5Z"></path>
</svg>
</div>
<div class="col-sm-12">
<div class="col-sm-3">
<div class="intro-card">
<h1 class="text-center">AvaChat</h1>
<p class="text-center fst-italic desc">👨🏽💻: <a href="https://github.com/Jaykef" target="_blank" style="text-decoration: none;font-size: 14px;">Jaward Sesay ( 苏杰 )</a><br> AI Research Engineer (Intern) @LinkSoul AI <br>(Ex-Intern @Z-Lab BAAI) <br><small> SWE Student @Beijing Institute of Technology</small><br>Single image and chat response as inputs (DI-D + ChatGPT/Claude).</p>
</div>
<div class="col-md-12 p-3 mb-2 mt-4 d-block">
<h4 class="pb-2">Select an avatar to chat with</h4>
<div class="d-flex">
<div class="col-md-3 p-1">
<img src="app/images/jaward.png" alt="Jaward" class="img-fluid avatar-img" data-src="app/images/jaward.png" >
</div>
<div class="col-md-3 p-1">
<img src="app/images/joker.png" alt="Joker" class="img-fluid avatar-img" data-src="app/images/joker.png">
</div>
<div class="col-md-3 p-1">
<img src="app/images/amira.png" alt="Amira" class="img-fluid avatar-img" data-src="app/images/amira.png">
</div>
<div class="col-md-3 p-1">
<img src="app/images/aquilla.png" alt="Aquilla" class="img-fluid avatar-img" data-src="app/images/aquilla.png">
</div>
</div>
<div class="d-flex mb-4">
<div class="col-md-3 p-1">
<img src="app/images/sonia.png" alt="Sonia" class="img-fluid avatar-img" data-src="app/images/sonia.png">
</div>
<div class="col-md-3 p-1">
<img src="app/images/dong.png" alt="Dong" class="img-fluid avatar-img" data-src="app/images/dong.png">
</div>
<div class="col-md-3 p-1">
<img src="app/images/sully.png" alt="Sully" class="img-fluid avatar-img" data-src="app/images/sully.png" >
</div>
<div class="col-md-3 p-1">
<img src="app/images/neytiri.png" alt="Neytiri" class="img-fluid avatar-img" data-src="app/images/neytiri.png">
</div>
</div>
<h4 class="mb-2">Input API Keys</h4>
<p>Note: you can use either OpenAI or API2D for text generation, not both.</p>
<div id="api-form-container" class="api-form-container">
<form class="api-form-desktop">
<div class="form-group">
<input type="text" class="form-control" id="did-api-key" placeholder="DI-D api key">
</div>
<div class="form-group">
<input type="text" class="form-control" id="api2d-api-key" placeholder="API2D api key for GPT4">
</div>
<div class="form-group">
<input type="text" class="form-control" id="openai-api-key" placeholder="OpenAI api key for ChatGPT">
</div>
</form>
</div>
<h4 class="pb-2 pt-4">Select a chat model</h4>
<select id="select_model" class="mb-2"></select>
<h4 class="pb-2 pt-4">Choose language for audio input</h4>
<select id="select_language"></select>
<select id="select_dialect"></select>
</div>
<div class="intro-card mt-4">
<h5 class="text-center">Get D-ID Api key <a href="https://studio.d-id.com/account-settings/" target="_blank" style="text-decoration: none;">Here</a><br><br>Get API2D Api key <a href="https://api2d.com/" target="_blank" style="text-decoration: none;">Here</a></h5>
</div>
</div>
<div class="col-sm-9">
<div class="main-chat">
<!-- talking-head video -->
<div id="talking-vid">
<h5 class="mt-4 text-center mx-4" id="select-inst">Select an avatar to chat with <br>on the left sidebar</h5>
<div class="no-video"></div>
<video id="talking-video" autoplay></video>
<div class="stats-btn">
<div id="buttons" class="text-center">
<button id="connect-button" type="button" class="btn btn-primary connect">Call</button>
<button id="destroy-button" type="button" class="btn btn-danger">End</button>
</div>
<!-- stream connection status -->
<div id="status" class="text-center mt-2 pt-1">
Cluster : <label id="ice-gathering-status-label" ></label
> |
ICE : <label id="ice-status-label"></label> |
Peer connection : <label id="peer-status-label" class="mx-2"></label> |
Signaling : <label id="signaling-status-label" class="mx-2"></label> |
Streaming : <label id="streaming-status-label" ></label>
</div>
</div>
</div>
</div>
<!-- chat -->
<div class="d-flex justify-content-center chat-wrapper">
<div id="results" class="results"></div>
</div>
<div id="user-input" class="mt-2">
<div class="chats">
<div class="text-end clear">
<svg id="clear_button" viewBox="0 0 24 24" width="48" height="48" fill="#fff" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7024 2.07782C20.3937 1.9095 20.0071 2.02326 19.8387 2.33191L14.7415 11.679C14.1315 11.2867 12.5639 10.42 11.3923 11.0061C10.3929 11.5061 10.1645 11.9182 9.7972 12.5811L9.75982 12.6485L17.4519 16.3461C17.8157 15.5976 18.0392 14.7269 17.7579 13.977C17.4612 13.1858 16.5737 12.5962 15.8846 12.2419L20.9565 2.94145C21.1248 2.6328 21.011 2.24614 20.7024 2.07782ZM9.05827 13.7646L9.08017 13.7343L16.7805 17.4359C16.6758 17.5743 16.5752 17.6958 16.4848 17.7962L12.9912 21.8721C12.7862 22.1113 12.4811 22.2405 12.1701 22.1901C11.4069 22.0663 9.9278 21.7116 8.93156 20.7456C8.80688 20.6246 8.85936 20.4169 9.00607 20.324C9.86774 19.7781 10.625 18.4374 10.625 18.4374C10.625 18.4374 9.05827 19.4999 7.0625 19.4374C5.52782 19.3893 3.64397 17.9429 2.85543 17.2771C2.6979 17.144 2.76842 16.8923 2.96968 16.8476C4.24898 16.5636 7.68904 15.6473 9.05827 13.7646Z"></path>
<path d="M8.60974 9.02978C8.52129 8.8234 8.22871 8.82341 8.14026 9.02978L7.77833 9.87431C7.70052 10.0559 7.55586 10.2005 7.37431 10.2783L6.52978 10.6403C6.3234 10.7287 6.32341 11.0213 6.52978 11.1097L7.37431 11.4717C7.55586 11.5495 7.70052 11.6941 7.77833 11.8757L8.14026 12.7202C8.22871 12.9266 8.52129 12.9266 8.60974 12.7202L8.97167 11.8757C9.04948 11.6941 9.19414 11.5495 9.37569 11.4717L10.2202 11.1097C10.4266 11.0213 10.4266 10.7287 10.2202 10.6403L9.37569 10.2783C9.19414 10.2005 9.04948 10.0559 8.97167 9.87431L8.60974 9.02978Z"></path>
<path d="M14.0511 5.99109C13.9847 5.8363 13.7653 5.8363 13.6989 5.99109L13.4275 6.62448C13.3691 6.76064 13.2606 6.86914 13.1245 6.92749L12.4911 7.19895C12.3363 7.26528 12.3363 7.48472 12.4911 7.55105L13.1245 7.82251C13.2606 7.88086 13.3691 7.98936 13.4275 8.12552L13.6989 8.75891C13.7653 8.9137 13.9847 8.9137 14.0511 8.75891L14.3225 8.12552C14.3809 7.98936 14.4894 7.88086 14.6255 7.82251L15.2589 7.55105C15.4137 7.48472 15.4137 7.26528 15.2589 7.19895L14.6255 6.92749C14.4894 6.86914 14.3809 6.76064 14.3225 6.62448L14.0511 5.99109Z"></path>
</svg>
</div>
<div class="input-group">
<textarea type="text" rows="1" id="user-text" class="form-control p-3 mt-2 final input" placeholder="Send a message..."></textarea>
<div id="input-audio" class="input-group-append p-2">
<button id="start_button" class="">
<img id="start_img" class="" src="app/images/mic.gif" alt="Start">
</button>
<button id="send-text-button" class="btn btn-success speech-button">
<svg id="send-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="26" height="26" fill="currentColor" class="h-4 w-4 m-1 md:m-0" stroke-width="2"><path d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z" fill="currentColor"></path></svg>
</button>
</div>
</div>
<div class="download-chat">
<svg id="download" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#fff" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
<path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
window.process = { browser: true, env: { ENVIRONMENT: 'BROWSER' } };
</script>
<script type="module" src="./app/js/app.js"></script>
<script type="module" src="./app/js/recoder.js"></script>
<script src="./app/js/languages.js"></script>
</body>
</html>