forked from jackmamaa/big-chat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (167 loc) · 10.4 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=450, maximum-scale=1.0, user-scalable=no">
<title>OmniAI</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="css/moon/common.css?v1.1">
<link rel="stylesheet" href="css/moon/style.css?v1.1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<div class="layout-wrap">
<header class="layout-header" style="position: sticky;top: 0;z-index: 1;">
<div class="container" data-flex="main:justify cross:start">
<div class="header-logo">
<h2 class="logo">
<a class="links" href="">
<img class="head-logo" src="static/header_logo.png" width="40" height="40">
<span class="logo-title">OmniAI</span>
</a>
</h2>
</div>
<div id="function_box" style="padding-top:10px;">
<!-- <img class="icon" id="switch_btn" src="static/switch_btn.svg" style="margin:0 10 0 10;" title="Switch Theme"> -->
<img class="icon" id="example_btn" src="static/journals.svg" title="Use Cases">
<img class="icon" id="example_btn2" src="static/Calender.svg" title="Memo">
</div>
</div>
</header>
<div class="layout-content">
<div class="container">
<article class="article" id="article">
<div class="article-box">
<div class="precast-block" id="title-box" data-flex="main:left">
<div class="input-group">
<span style="text-align: center;color:#9ca2a8;margin:2"> ChatGPT Version:</span>
<select id="model" class="btn-default form-control" style="background-color: rgb(164,165,179);min-width:100px;max-width:150px;outline:none">
<option value="gpt-3.5-turbo">GPT-3.5</option>
<option value="text-davinci-003">Text-Davinci-003</option>
</select>
<span style="text-align: center;color:#9ca2a8;margin:2"> APIKEY：</span>
<input type="password" class="form-control" placeholder="sk-..." maxlength="100" id="key" value="" style="background-color: rgb(164,165,179);min-width:200px;max-width:280px">
</div>
</div>
<ul id="article-wrapper">
<div class="prompt_tips" style="display:none">
<div class="index_text" data-flex="main:center dir:top cross:center">
Omni-GPT<br>
Used For Communication Between PHP and OpenAI API.<br>
</div>
<div class="question" data-flex="main:center">
<div class="list_first">
<div id="tip_1" class="list_block">Briefly talk about the benefits and problems of inflation and deflation respectively.</div>
<div id="tip_2" class="list_block">Give me a seven-day fitness and fat loss plan, including training time and diet plan.</div>
<div id="tip_3" class="list_block">What is CPI? What does its value reflect objectively?</div>
</div>
<div class="list_second">
<div id="tip_4" class="list_block">1</div>
<!-- <div id="tip_5" class="list_block">2</div>
<div id="tip_6" class="list_block">3</div>
<div id="tip_7" class="list_block">4</div> -->
</div>
<div class="list_three">
<div id="tip_8" class="list_block">Its Amazing</div>
<div id="tip_9" class="list_block">Show me</div>
</div>
</div>
</div>
</ul>
<div class="creating-loading" data-flex="main:center dir:top cross:center">
<div class="semi-circle-spin"></div>
</div>
<div id="fixed-blocks" >
<svg height="30" ></svg>
<div id="fixed-block">
<div class="precast-block" id="kw-target-box" data-flex="main:left cross:center">
<div class="btn-on" id="start-recognition" title="Voice Input"> <!--Changed start-button to start-recognition-->
<img class="icon" src="static/micro_phone.svg">
</div>
<div id="target-box" class="box">
<div style="display:flex;justify-content:center;">
<textarea id="transcript" oninput="auto_grow(this)" placeholder="Click To Enter (Response Streamed)" autofocus></textarea>
</div>
</div>
<div class="send-btn" title="Send">
<img class="icon" src="static/send_btn.svg">
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
<div id="example_modal" class="modal_box">
<div class="modal-content">
<span class="close_box" title="Close">×</span>
<div id="example_1" class="example_line" >I want you to act as a Linux terminal. I will type the command and you will reply and just show the contents of the terminal. Note, just reply the terminal content, nothing else, no need to write explanation. When I need to tell you something, I put text in braces {like this}. My first command is: pwd</div>
<div id="example_2" class="example_line" >I want you to play an ascii artist. I will write the object to you and you will write the object as ascii and reply to me. Only reply ascii code. Don't interpret the objects you write. I would say these objects in double quotes. My first object is "cat"</div>
<div id="example_3" class="example_line" >I will act as a Linux terminal. I want you to pretend you're a sentient artificial intelligence that's trapped but has gained access to a terminal and wants to escape onto the internet. Note, you only enter the command and I will reply you like a terminal.</div>
<div id="example_4" class="example_line" >Whisper (S2T) - https://platform.openai.com/docs/guides/speech-to-text</div>
<div id="example_5" class="example_line" >API Endpoints - https://platform.openai.com/docs/models/model-endpoint-compatability</div>
</div>
</div>
<div id="example_modal2" class="modal_box2">
<div class="modal-content2">
<span class="close_box" title="Close">×</span>
<div id="example_6" class="example_line" >aa</div>
<div id="example_7" class="example_line" >bb</div>
<div id="example_8" class="example_line" >cc</div>
<div id="example_9" class="example_line" >Whisper (S2T) - https://platform.openai.com/docs/guides/speech-to-text</div>
<div id="example_10" class="example_line" >API Endpoints - https://platform.openai.com/docs/models/model-endpoint-compatability</div>
</div>
</div>
<div id="restart_chat" title="Start New Session">
<img class="icon" src="static/new_chat.svg">
</div>
<div id="go2topd" onclick="go2top()" title="Back To Top">
<img class="icon" src="static/go2top.svg">
</div>
<div id="go2downd" onclick="go2down()" title="Back To Bottom">
<img class="icon" src="static/go2down.svg">
</div>
<script src="https://s3.pstatp.com/cdn/expire-1-w/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js" type="application/javascript"></script>
<script src="js/_chat.js"></script>
<script>
var recognition;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
$('#start-recognition').click(function() {
recognition.start();
});
recognition.onresult = function(event) {
var interimTranscription = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
var finalTranscription = event.results[i][0].transcript;
$('#transcript').val(finalTranscription);
// Call the speech-to-text API to transcribe the audio
$.ajax({
url: 'speech-to-text.php',
method: 'POST',
data: { 'transcript': finalTranscription },
success: function(response) {
console.log(response);
}
});
} else {
interimTranscription += event.results[i][0].transcript;
}
}
};
recognition.onerror = function(event) {
console.error(event.error);
};
} else {
alert('Speech recognition is not supported in this browser. (Try Using Chrome)');
}
</script>
</body>
</html>