ollama 包测试，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <!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="./style.css">
</head>

<body>
  <h1 class="title">
    Hello 笔.COOL
  </h1>

  <button id='btn_send'>
    发送
  </button>
  <script src="./index.js"></script>
</body>

</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

            
                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

            
            import {
  Ollama
} from 'https://esm.sh/ollama/browser'
console.log(Ollama)
const ollama = new Ollama({
  host: 'http://localhost:8080'
})
async function sendMessage() {
  const response = await ollama.chat({
    model: 'gpt-oss:20b',
    messages: [{
      role: 'user',
      content: '讲一个短笑话,不要思考太多',
      think: 'low'
    }]
  })
  console.log(response.message.content)
  // 响应头
  console.log(response)
}
const btnSend = document.getElementById('btn_send');
btnSend.addEventListener('click', async () => {
  console.log('123')
  sendMessage()
})

预览

控制台