GPT-3.5: 智能对话助手 - 流式响应，体验更佳

<div class='container'>
<h1>GPT-3.5</h1>
<div>
<label class='conversation-label'>系统角色：</label><br>
<input type='text' id='system-message' class='input-box' placeholder='输入gpt的预设角色'>
</div>
<div>
<label class='conversation-label'>用户输入框：</label><br>
<textarea id='user-input' class='input-box' placeholder='2023.9.26已更流式快速响应，快来体验吧！！！🐕🐕🐕'></textarea>
</div>
<div>
<label class='conversation-label'>选择GPT模型（5种）：</label><br>
<select id='model-select' class='input-box'>
{% for key, value in models.items() %}
<option value='{{ key }}'>{{ value }}</option>
{% endfor %}
</select>
</div>
<div>
<label class='conversation-label'>温度（Temperature）：</label><br>
<input type='float' id='temperature' class='input-box' placeholder='范围>=0，接近0倾向连贯性，越大倾向多样性，建议0-1'>
</div>
<div>
<label class='conversation-label'>最大令牌数（Max-Tokens）：</label><br>
<input type='int' id='max-tokens' class='input-box' placeholder='最大范围4000/16000，默认模型最大不超过4000，代表对话总字数'>
</div>
<div>
  <div class='checkbox-container'>
    <label for='continuous-chat' class='conversation-label'>开启连续对话：</label>
    <input type='checkbox' id='continuous-chat'>
  </div>
</div>
<div>
<label class='response-label'>对话消息记录框：</label><br>
<!-- 修改逐个字显示的文本框 -->
<div id='response-text' class='response-box'></div>
</div>
<br>
<div class='button-container'>
<button id='send-button' class='button'>发送</button>
<button id='clear-button' class='button clear-button'>清空</button>
</div>
<!-- 嵌入base64编码的音频数据 -->
<audio id='notification-audio' preload='auto'>
<source src='data:audio/mp3;base64,base64编码' type='audio/mp3' />
</audio>
</div>
<div class='author-info'>BY-中北锋哥-2023.09.26</div>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    // 设置默认值
    document.getElementById('system-message').value = 'You are a helpful assistant.';
    document.getElementById('temperature').value = '0.2';
    document.getElementById('max-tokens').value = '12345';
  });
<p>document.getElementById('send-button').addEventListener('click', function() {
// 获取用户输入和选定的模型
var user_input = document.getElementById('user-input').value;
var selected_model = document.getElementById('model-select').value;
var system_message = document.getElementById('system-message').value;
var temperature = parseFloat(document.getElementById('temperature').value);
var max_tokens = parseInt(document.getElementById('max-tokens').value);
var continuous_chat = document.getElementById('continuous-chat').checked; // 获取连续对话复选框状态</p>
<pre><code>// 检查用户输入是否为空
if (user_input === '') {
  alert('请输入有效的消息内容。');
  return; // 不发送请求
}

// 发送请求到服务器
fetch('/get_response', {
  method: 'POST',
  body: JSON.stringify({
    user_input: user_input,
    selected_model: selected_model,
    system_message: system_message,
    temperature: temperature,
    max_tokens: max_tokens,
    continuous_chat: continuous_chat
  }),
  headers: {
    'Content-Type': 'application/json' // 更新 Content-Type
  }
})
  .then(response =&gt; response.json())
  .then(data =&gt; {
    // 渲染GPT回复为Markdown格式
    renderMarkdown(data.gpt_response);

    // 清空用户输入框
    document.getElementById('user-input').value = '';
  })
  .catch(error =&gt; {
    console.error(error);
    // 如果发生错误，弹出错误提示框
    alert('发生错误：' + error.message);
  });
</code></pre>
<p>});</p>
<p>// 清除对话消息记录框
document.getElementById('clear-button').addEventListener('click', function() {
// 清空用户输入和对话消息记录框
document.getElementById('user-input').value = '';
document.getElementById('response-text').innerHTML = '';
});
</script></p>
<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>
<script>
  // 将文本框中的文本渲染为Markdown格式
  function renderMarkdown(text) {
    var responseElement = document.getElementById('response-text');
    responseElement.innerHTML = marked(text);
  }
</script>
</body>
</html>