js+css使用chatgpt打造一个ai语音交互的助手代码-html代码-BFW代码库

js+css使用chatgpt打造一个ai语音交互的助手代码

代码语言：html

所属分类：其他

代码描述：js+css使用chatgpt打造一个ai语音交互的助手代码，类似于贾维斯，请在edge浏览器中打开，点击麦克风图标，开始询问问题，然后等待ai语音回复您。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">

  
  
<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #120029;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  color: white;
  font-family: "Roboto", "Helvetica Neue", sans-serif;
}

.topbar--container,
.bo-container,
.output--container,
.input--container {
  width: 80%;
  max-width: 600px;
}

.topbar--container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
}
.topbar--container .topbar--logo {
  width: 100px;
}
.topbar--container .topbar--progress {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.topbar--container .topbar--progress:after {
  content: "";
  width: 100%;
  height: 1px;
  z-index: 2;
  position: absolute;
  background-color: white;
}
.topbar--container .topbar--progress span {
  background-color: white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;
}
.topbar--container .topbar--progress span:nth-child(1) {
  background-color: #2FB5F3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar--container .topbar--progress span:nth-child(1):after {
  position: absolute;
  content: "";
  border-radius: 50%;
  border: 2px solid #2FB5F3;
  height: 20px;
  width: 20px;
}

.bo--container {
  width: 80%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}
.bo--container .bo--element {
  height: 25vh;
  width: 25vh;
  border-radius: 50%;
  display: flex;
  position: relative;
}
.bo--container .bo--element span {
  transition: all 600ms ease-in-out;
  height: 100%;
  width: 100%;
  position: absolute;
  border-radius: 50%;
  border: 5px solid white;
  mix-blend-mode: screen;
}
.bo--container .bo--element span:nth-child(1) {
  background-color: rgba(24, 221, 0, 0.2);
  border-color: #18DD00;
  z-index: 3;
}
.bo--container .bo--element span:nth-child(2) {
  background-color: rgba(219, 68, 55, 0.2);
  border-color: #DB4437;
  bottom: 16%;
  z-index: 2;
}
.bo--container .bo--element span:nth-child(3) {
  background-color: rgba(47, 181, 243, 0.2);
  border-color: #2FB5F3;
  top: 16%;
  z-index: 1;
}
.bo--container .bo--element.active span {
  border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
}
.bo--container .bo--element.active span:nth-child(1) {
  -webkit-animation: spin1 5.5s linear infinite;
          animation: spin1 5.5s linear infinite;
}
.bo--container .bo--element.active span:nth-child(2) {
  -webkit-animation: spin1 5.5s linear infinite;
          animation: spin1 5.5s linear infinite;
  bottom: 2%;
}
.bo--container .bo--element.active span:nth-child(3) {
  -webkit-animation: spin1 5.5s linear infinite;
          animation: spin1 5.5s linear infinite;
  top: 2%;
}
.bo--container .bo--speech-bars {
  width: 180px;
  height: 12.5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bo--container .bo--speech-bars span {
  height: 100%;
  background-color: white;
  .........完整代码请登录后点击上方下载按钮下载查看