使用 Ollama，讓你在本機跑大型語言模型，使用 Open WebUI，讓它更像網頁版的 ChatGPT。
91 min readAug 1, 2024
目錄
⦿ Ollama
⦿ 在 CLI 使用對話
⦿ Open WebUI
⦿ Docker
⦿ 在 Web 使用對話 Ollama
Ollama 是一個開源平台，為了簡化 LLM（大型語言模型）在地端的運作，讓一般使用者也能夠順利跑 LLM，在本地跑模型，最主要的區別是離線，離線跑更加具隱私性，另外一點是省錢。
接著，我們來安裝 Ollama 吧！
首先到 Ollama 官網（https://ollama.com/），按下 Download。
選擇你的系統，再按一次 Download。
下載完後解壓縮就會看到 Ollama 的可愛圖像，點兩下安裝，再按 Next、Install。
接著，你就會在安裝程式上面看到一串指令例如 ollama run llama3，複製它，最後！在 Terminal 中，鍵入 ollama run llama3 就會在本機開始安裝 llama 了。
成功後，我們就可與 llama3 開始對話。
繼續閱讀｜回目錄在 CLI 使用對話
在 >>> 後方鍵入你的問題，llama3:8b 就會將答案一一生成，如下：
>>> 用 java script 寫一個俄羅斯方塊的遊戲, 請用中文回答.
以下是一個使用 JavaScript 實現的俄羅斯方塊（Tetris）遊戲的範例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>俄羅斯方塊</title>
<style>
* {
box-sizing: border-box;
}
#game-container {
position: relative;
width: 300px;
height: 500px;
border: 1px solid black;
background-color: #f0f0f0;
}
.cell {
position: absolute;
width: 20px;
height: 20px;
border: 1px solid black;
background-color: #fff;
}
</style>
</head>
<body>
<div id="game-container">
</div>
<script>
let gameContainer = document.getElementById('game-container');
let cellWidth = 20;
let cellHeight = 20;
let cellsPerRow = Math.floor(gameContainer.offsetWidth / cellWidth);
let cellsPerColumn = Math.floor(gameContainer.offsetHeight / cellHeight);
class Cell {
constructor(x, y) {
this.x = x;
this.y = y;
this.element = document.createElement('div');
this.element.classList.add('cell');
this.element.style.top = `${y * cellHeight}px`;
this.element.style.left = `${x * cellWidth}px`;
gameContainer.appendChild(this.element);
}
}
class TetrisPiece {
constructor(type) {
this.type = type;
this.cells = [];
switch (this.type) {
case 'I':
for (let i = 0; i < 4; i++) {
let cellX = Math.floor(i / 2);
let cellY = i % 2;
this.cells.push(new Cell(cellX, cellY));
}
break;
case 'J':
for (let i = 0; i < 3; i++) {
let cellX = 1;
let cellY = Math.floor(i / 2);
this.cells.push(new Cell(cellX, cellY));
}
this.cells.push(new Cell(1, 1));
break;
case 'L':
for (let i = 0; i < 3; i++) {
let cellX = 2;
let cellY = Math.floor(i / 2);
this.cells.push(new Cell(cellX, cellY));
}
break;
case 'O':
for (let i = 0; i < 4; i++) {
let cellX = 1;
let cellY = i % 2;
this.cells.push(new Cell(cellX, cellY));
}
break;
case 'S':
for (let i = 0; i < 3; i++) {
let cellX = 1;
let cellY = Math.floor(i / 2);
this.cells.push(new Cell(cellX, cellY));
}
this.cells.push(new Cell(1, 1));
break;
case 'T':
for (let i = 0; i < 3; i++) {
let cellX = 1;
let cellY = Math.floor(i / 2);
this.cells.push(new Cell(cellX, cellY));
}
break;
case 'Z':
for (let i = 0; i < 3; i++) {
let cellX = 1;
let cellY = Math.floor(i / 2);
this.cells.push(new Cell(cellX, cellY));
}
this.cells.push(new Cell(1, 1));
break;
}
}
rotate() {
for (let i = 0; i < this.cells.length; i++) {
let cellX = this.cells[i].x;
let cellY = this.cells[i].y;
this.cells[i].element.style.top = `${cellY * cellHeight}px`;
this.cells[i].element.style.left = `${cellX * cellWidth}px`;
}
}
moveDown() {
for (let i = 0; i < this.cells.length; i++) {
let cellY = this.cells[i].y;
if (cellY >= cellsPerColumn - 1) {
return false;
}
this.cells[i].element.style.top = `${(cellY + 1) * cellHeight}px`;
}
return true;
}
moveLeft() {
for (let i = 0; i < this.cells.length; i++) {
let cellX = this.cells[i].x;
if (cellX > 0) {
this.cells[i].element.style.left = `${(cellX - 1) * cellWidth}px`;
} else {
return false;
}
}
return true;
}
moveRight() {
for (let i = 0; i < this.cells.length; i++) {
let cellX = this.cells[i].x;
if (cellX < cellsPerRow - 1) {
this.cells[i].element.style.left = `${(cellX + 1) * cellWidth}px`;
} else {
return false;
}
}
return true;
}
static getRandomPieceType() {
let types = ['I', 'J', 'L', 'O', 'S', 'T', 'Z'];
return types[Math.floor(Math.random() * types.length)];
}
}
class Game {
constructor() {
this.tetrisPieces = [];
this.currentPiece = null;
this.score = 0;
this.linesCleared = 0;
this.nextPieceType = Cell.getRandomPieceType();
this.newPiece();
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowLeft':
if (this.currentPiece.moveLeft()) {
this.updateScore();
} else {
event.preventDefault();
}
break;
case 'ArrowRight':
if (this.currentPiece.moveRight()) {
this.updateScore();
} else {
event.preventDefault();
}
break;
case 'ArrowDown':
if (this.currentPiece.moveDown()) {
this.updateScore();
this.checkLinesCleared();
} else {
event.preventDefault();
}
break;
}
});
setInterval(() => {
if (this.currentPiece) {
if (this.currentPiece.moveDown()) {
this.updateScore();
this.checkLinesCleared();
} else {
this.newPiece();
}
}
}, 500);
}
newPiece() {
this.currentPiece = null;
setTimeout(() => {
this.currentPiece = new TetrisPiece(this.nextPieceType);
this.nextPieceType = Cell.getRandomPieceType();
this.updateScore();
}, 1000);
}
updateScore() {
this.score++;
let scoreElement = document.getElementById('score');
if (scoreElement) {
scoreElement.textContent = `分數：${this.score}`;
}
}
checkLinesCleared() {
for (let i = cellsPerColumn - 1; i >= 0; i--) {
let isLineFull = true;
for (let j = 0; j < cellsPerRow; j++) {
if (!this.getCell(j, i).element) {
isLineFull = false;
break;
}
}
if (isLineFull) {
this.linesCleared++;
let scoreElement = document.getElementById('score');
if (scoreElement) {
scoreElement.textContent = `分數：${this.score}，清除行數：${this.linesCleared}`;
}
for (let j = i; j < cellsPerColumn - 1; j++) {
for (let k = 0; k < cellsPerRow; k++) {
this.getCell(k, j).element.style.top = `${(j + 1) * cellHeight}px`;
}
}
}
}
}
getCell(x, y) {
return this.tetrisPieces.find((piece) => piece.cells.some((cell) => cell.x === x &&
cell.y === y));
}
}
let game = new Game();
</script>
</body>
</html>
```
這個遊戲使用了JavaScript和HTML創建。它包括了一些類別，例如 `Cell`、`TetrisPiece` 和 `Game`。
`Cell` 類別表示俄羅斯方塊的每個單元格。`TetrisPiece` 類別表示俄羅斯方塊的每個形狀。`Game` 類別控制
遊戲的運行。
在遊戲中，你可以使用箭頭鍵來控制俄羅斯方塊的運動，例如向左、向右和向下。當俄羅斯方塊移到最底部時，
遊戲將會創建新的俄羅斯方塊。遊戲也會追蹤分數和清除行數。
注意：這只是一個基本的示範，並不包含所有遊戲功能和美化。在實際上，你可能需要添加更多的功能和美化以
使遊戲更加友善和可玩。得到答案了！
除此之外，我們也可以透過 API 的方式去訪問這個語言模型，官方有給出範例如下：
curl -X POST http://localhost:11434/api/generate -d '{
"model": "llama3",
"prompt":"Why is the sky blue?"
}'model 是 llama3，問題是為什麼天空是藍色的，打開 Terminal，將 curl 指令貼進去，會依序得到如下：
{"model":"llama3","created_at":"2024-07-30T01:45:54.806094Z","response":"The","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:54.860209Z","response":" color","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:54.91508Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:54.96759Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.020592Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.072944Z","response":" can","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.125672Z","response":" appear","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.178174Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.231465Z","response":" because","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.284097Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.336682Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.389013Z","response":" phenomenon","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.441681Z","response":" called","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.494353Z","response":" Ray","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.547402Z","response":"leigh","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.600093Z","response":" scattering","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.652603Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.705195Z","response":" which","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.758211Z","response":" is","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.811044Z","response":" named","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.864402Z","response":" after","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.917265Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:55.970536Z","response":" British","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.023086Z","response":" physicist","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.076072Z","response":" Lord","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.129118Z","response":" Ray","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.182845Z","response":"leigh","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.235664Z","response":" who","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.28837Z","response":" first","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.340948Z","response":" described","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.394041Z","response":" it","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.446832Z","response":" in","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.500583Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.553409Z","response":" late","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.60597Z","response":" ","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.659151Z","response":"19","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.71373Z","response":"th","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.767002Z","response":" century","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.819948Z","response":".\n\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.872605Z","response":"Here","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.925713Z","response":"'s","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:56.979112Z","response":" what","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.032389Z","response":" happens","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.085804Z","response":":\n\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.138675Z","response":"1","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.191266Z","response":".","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.244344Z","response":" **","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.297154Z","response":"Sun","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.350799Z","response":"light","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.403781Z","response":" enters","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.45649Z","response":" Earth","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.509593Z","response":"'s","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.563014Z","response":" atmosphere","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.616377Z","response":"**:","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.669403Z","response":" When","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.722427Z","response":" sunlight","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.775166Z","response":" from","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.82846Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.881537Z","response":" sun","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.935457Z","response":" enters","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:57.988478Z","response":" our","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.041175Z","response":" atmosphere","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.094324Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.147697Z","response":" it","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.201267Z","response":" encounters","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.254392Z","response":" tiny","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.307159Z","response":" molecules","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.360419Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.413825Z","response":" gases","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.467594Z","response":" such","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.520599Z","response":" as","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.573264Z","response":" nitrogen","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.627381Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.680847Z","response":"N","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.734039Z","response":"2","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.78702Z","response":")","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.839819Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.893132Z","response":" oxygen","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:58.946719Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.000154Z","response":"O","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.053118Z","response":"2","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.106203Z","response":").\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.158985Z","response":"2","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.212288Z","response":".","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.265403Z","response":" **","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.319213Z","response":"Sc","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.372394Z","response":"attering","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.425134Z","response":" occurs","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.47842Z","response":"**:","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.532286Z","response":" These","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.585354Z","response":" gas","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.638366Z","response":" molecules","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.691184Z","response":" scatter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.745035Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.79878Z","response":" light","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.851902Z","response":" in","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.905015Z","response":" all","done":false}
{"model":"llama3","created_at":"2024-07-30T01:45:59.959137Z","response":" directions","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.012622Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.067013Z","response":" but","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.120716Z","response":" they","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.173568Z","response":" scatter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.22693Z","response":" shorter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.280106Z","response":" wavelengths","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.333978Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.387075Z","response":"like","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.439878Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.493612Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.547132Z","response":" violet","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.600626Z","response":")","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.653665Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.70673Z","response":" than","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.759961Z","response":" longer","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.813696Z","response":" wavelengths","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.867434Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.920723Z","response":"like","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:00.97376Z","response":" red","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.027506Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.081554Z","response":" orange","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.134999Z","response":").","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.188332Z","response":" This","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.241364Z","response":" is","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.294959Z","response":" because","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.349113Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.402449Z","response":" smaller","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.455783Z","response":" molecules","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.508849Z","response":" are","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.562445Z","response":" better","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.616952Z","response":" at","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.670391Z","response":" interacting","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.724258Z","response":" with","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.777615Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.830915Z","response":" shorter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.885159Z","response":" wavelengths","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.938465Z","response":".\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:01.991396Z","response":"3","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.044883Z","response":".","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.098913Z","response":" **","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.152277Z","response":"Blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.205606Z","response":" light","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.258695Z","response":" dominates","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.31228Z","response":"**:","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.366515Z","response":" As","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.41987Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.473093Z","response":" result","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.526305Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.579874Z","response":" this","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.634246Z","response":" scattering","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.688146Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.741359Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.79518Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.849213Z","response":" light","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.903925Z","response":" is","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:02.957155Z","response":" distributed","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.010729Z","response":" throughout","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.064181Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.118501Z","response":" atmosphere","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.171936Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.225196Z","response":" giving","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.278891Z","response":" it","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.333338Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.386848Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.440128Z","response":" appearance","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.493847Z","response":" to","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.547392Z","response":" our","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.601711Z","response":" eyes","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.655176Z","response":".","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.708352Z","response":" The","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.762112Z","response":" other","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.816607Z","response":" colors","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.870203Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.923764Z","response":" like","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:03.976988Z","response":" red","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.030687Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.085148Z","response":" orange","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.138655Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.191897Z","response":" continue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.245739Z","response":" to","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.299516Z","response":" travel","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.353422Z","response":" in","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.406933Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.460895Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.514662Z","response":" direct","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.569277Z","response":" path","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.624382Z","response":" to","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.677854Z","response":" our","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.731867Z","response":" eyes","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.786179Z","response":" without","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.839857Z","response":" being","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.893291Z","response":" scattered","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:04.947058Z","response":" as","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.001589Z","response":" much","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.05543Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.10892Z","response":" which","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.1628Z","response":" is","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.216463Z","response":" why","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.270358Z","response":" we","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.323812Z","response":" see","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.377625Z","response":" them","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.431464Z","response":" as","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.486006Z","response":" coming","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.539667Z","response":" from","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.593188Z","response":" a","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.646971Z","response":" specific","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.701464Z","response":" direction","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.755086Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.80849Z","response":"the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.862384Z","response":" sun","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.916061Z","response":").\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:05.970427Z","response":"4","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.023989Z","response":".","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.077928Z","response":" **","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.132394Z","response":"At","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.186607Z","response":"mos","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.240271Z","response":"pheric","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.294397Z","response":" conditions","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.348273Z","response":" affect","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.402913Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.456763Z","response":" color","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.510344Z","response":"**:","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.564478Z","response":" The","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.619097Z","response":" apparent","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.672933Z","response":" color","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.726635Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.780577Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.83506Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.889051Z","response":" can","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.942744Z","response":" be","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:06.996951Z","response":" influenced","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.051467Z","response":" by","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.105417Z","response":" various","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.1591Z","response":" atmospheric","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.214884Z","response":" conditions","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.269505Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.323535Z","response":" such","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.377196Z","response":" as","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.431601Z","response":":\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.485926Z","response":"\t","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.541346Z","response":"*","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.59499Z","response":" Dust","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.650874Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.704687Z","response":" pollution","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.759221Z","response":" particles","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.813856Z","response":":","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.868804Z","response":" These","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.923026Z","response":" can","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:07.977002Z","response":" scatter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.031411Z","response":" light","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.08636Z","response":" in","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.1405Z","response":" different","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.194381Z","response":" ways","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.248797Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.30349Z","response":" making","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.357401Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.412076Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.467265Z","response":" appear","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.52151Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.575434Z","response":" h","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.629774Z","response":"azy","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.68463Z","response":" or","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.738879Z","response":" orange","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.792744Z","response":".\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.847117Z","response":"\t","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.90206Z","response":"*","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:08.956518Z","response":" Water","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.010467Z","response":" vapor","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.064974Z","response":":","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.119566Z","response":" High","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.173787Z","response":" levels","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.227627Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.282213Z","response":" water","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.336801Z","response":" vapor","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.390635Z","response":" can","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.445004Z","response":" make","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.500655Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.555034Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.609079Z","response":" appear","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.663855Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.718757Z","response":" white","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.773259Z","response":" or","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.827377Z","response":" gray","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.882104Z","response":".\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.936987Z","response":"\t","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:09.991181Z","response":"*","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.045633Z","response":" Cloud","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.10088Z","response":"s","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.155225Z","response":":","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.209241Z","response":" Cloud","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.263945Z","response":"s","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.318863Z","response":" can","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.373359Z","response":" reflect","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.427517Z","response":" sunlight","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.482123Z","response":" and","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.536922Z","response":" make","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.59106Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.6454Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.701056Z","response":" appear","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.755533Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.809631Z","response":" white","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.86426Z","response":" or","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.919117Z","response":" gray","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:10.973642Z","response":".\n\n","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.027849Z","response":"In","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.082711Z","response":" summary","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.137558Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.191881Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.246521Z","response":" color","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.301901Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.356404Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.410669Z","response":" sky","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.465675Z","response":" appears","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.520699Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.574958Z","response":" because","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.629627Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.684977Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.739577Z","response":" scattering","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.793869Z","response":" of","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.849229Z","response":" sunlight","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.904175Z","response":" by","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:11.958463Z","response":" the","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.013084Z","response":" tiny","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.068504Z","response":" molecules","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.123087Z","response":" in","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.177325Z","response":" our","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.232415Z","response":" atmosphere","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.287377Z","response":",","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.34176Z","response":" with","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.396615Z","response":" shorter","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.451896Z","response":" wavelengths","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.50657Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.560886Z","response":"like","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.615932Z","response":" blue","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.6709Z","response":")","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.725156Z","response":" being","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.779772Z","response":" scattered","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.835104Z","response":" more","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.889729Z","response":" than","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:12.944196Z","response":" longer","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.000064Z","response":" wavelengths","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.05527Z","response":" (","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.109805Z","response":"like","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.164932Z","response":" red","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.2205Z","response":").","done":false}
{"model":"llama3","created_at":"2024-07-30T01:46:13.2751Z","response":"","done":true,"done_reason":"stop",
"context":[128006,882,128007,271,10445,374,279,13180,6437,30,128009,128006,78191,128007,271,791,1933,315,279,13180,649,5101,6437,1606,315,264,25885,2663,13558,64069,72916,11,902,374,7086,1306,279,8013,83323,10425,13558,64069,889,1176,7633,433,304,279,3389,220,777,339,9478,382,8586,596,1148,8741,1473,16,13,3146,31192,4238,29933,9420,596,16975,96618,3277,40120,505,279,7160,29933,1057,16975,11,433,35006,13987,35715,315,45612,1778,439,47503,320,45,17,8,323,24463,320,46,17,4390,17,13,3146,3407,31436,13980,96618,4314,6962,35715,45577,279,3177,304,682,18445,11,719,814,45577,24210,93959,320,4908,6437,323,80836,8,810,1109,5129,93959,320,4908,2579,323,19087,570,1115,374,1606,279,9333,35715,527,2731,520,45830,449,279,24210,93959,627,18,13,3146,10544,3177,83978,96618,1666,264,1121,315,420,72916,11,279,6437,3177,374,4332,6957,279,16975,11,7231,433,264,6437,11341,311,1057,6548,13,578,1023,8146,11,1093,2579,323,19087,11,3136,311,5944,304,264,810,2167,1853,311,1057,6548,2085,1694,38067,439,1790,11,902,374,3249,584,1518,1124,439,5108,505,264,3230,5216,320,1820,7160,4390,19,13,3146,1688,8801,33349,4787,7958,279,1933,96618,578,10186,1933,315,279,13180,649,387,28160,555,5370,45475,4787,11,1778,439,512,197,9,33093,323,25793,19252,25,4314,649,45577,3177,304,2204,5627,11,3339,279,13180,5101,810,305,13933,477,19087,627,197,9,10164,38752,25,5234,5990,315,3090,38752,649,1304,279,13180,5101,810,4251,477,18004,627,197,9,15161,82,25,15161,82,649,8881,40120,323,1304,279,13180,5101,810,4251,477,18004,382,644,12399,11,279,1933,315,279,13180,8111,6437,1606,315,279,72916,315,40120,555,279,13987,35715,304,1057,16975,11,449,24210,93959,320,4908,6437,8,1694,38067,810,1109,5129,93959,320,4908,2579,570],
"total_duration":19510323166,
"load_duration":814691250,
"prompt_eval_count":16,
"prompt_eval_duration":225374000,
"eval_count":344,
"eval_duration":18469088000}可以看見在 context 之前，done 都是 false，這表示文本尚未完全生成，直到 done 為 true，done_reason 為 stop 才表示完全生成。
等等，若是用 call api 的方式，光是這一段消耗大量資源不說，生成的文本要怎麼好好看更是個問題，如果有使用 ChatGPT 的朋友一定會對上面這段感到不耐吧，要知道這是在 Terminal 中給的回應，並不如 Medium 中呈現這般舒適。
我們先回到 llama3:8b 的對話框，在 >>> 後面輸入 /bye，離開對話。
我們回頭看 API 的 endpoint：http://localhost:11434/，試著在瀏覽器中輸入這段網址，得到如下：
再連到 http://localhost:11434/api/tags，將列出 Ollama 下有多少個模型。
如此會列出有多少模型，以及這個模型的 family，由於這邊我建立過 llama3:text 與 llama3，可以看到他們兩者的 family 都是 llama，在 https://ollama.com/library 網站上可以看到有什麼模型可以用，當然，這邊使用的是 Meta 的 llama。
這表示說我們已經在本機起了一個伺服器，透過 localhost 加上 port，可以以瀏覽器得到伺服器的簡單資料，那麼，有沒有辦法透過網頁的方式來與對話機器人對話呢？
有的，使用 Open WebUI。
繼續閱讀｜回目錄Open WebUI
Open WebUI 是一個開源的前端框架，當它跟 Ollama 這個本地的語言模型伺服器結合，就可以做到登入介面與權限管控（RBAC），再來是透過網頁的方式瀏覽並響應問答結果。
過去有用過 docker 架內網伺服器，或使用 Apache、XAMPP 等架內網伺服器的朋友就不用太擔心，下面會使用 docker 來起 Open WebUI，首先連到 Open WebUI 的官網文件（https://docs.openwebui.com/）。
有告訴你如果 Ollama 在同個電腦，或不同電腦的做法，如果在同個電腦就這樣起服務：
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:maindocker run 是起一個容器（Container）；-d 是以分離模式（detach）在後台運作；-p 3000:8080 是將 3000 映射到 8080 這個網頁伺服器用的 port； — add 加入宿主機；-v 掛載到 /app/backend/data 路徑，相關 log 就會存在裡面； — restart always 無論如何都會自動重啟。
在執行 docker run 之前，如果你電腦沒有使用過 docker，那麼 which docker 會出現 docker not found，雖然過去我們可以用 brew install docker docker-compose來安裝 docker，但現在 docker 也有了圖形化介面。
繼續閱讀｜回目錄Docker
同樣地，我們到 docker 官網 https://www.docker.com/，選擇你電腦相應的版本下載 Docker Desktop 並安裝，點開 docker 啟用它，回到上一步，這時 which docker 就會顯示這樣的路徑：/usr/local/bin/docker。
接著同樣使用如下指令：
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main通常由於本地沒有該映像檔，它就會自動尋找遠程庫去下載，部署後，打開 Docker Desktop。
在 Port 的地方 3000:8000，前面說過是 3000 port 映射到 8080 port，後面有一個被方框包住的斜角箭頭，就是打開網址的意思。
當然這個網址就是 http://localhost:3000。
首次進入時需要註冊，第一個註冊的使用者為管理員。
既然已經將網頁伺服器起起來，那麼，到網路設定的地方找到當前電腦的 IP 位址。
這表示說其他電腦也可透過 http://192.168.23.25:3000 來連到這個 Web Server 使用對話機器人。接著註冊的使用者可經由管理員調整權限。
把待審核轉為使用者即可，或再添加一個管理員。
繼續閱讀｜回目錄在 Web 使用對話
登入 Web，像使用 ChatGPT 一般去開啟新對話。
選擇已經在伺服器中安裝的模型，由於我安裝過 llama3 跟 llama3:text，所以這邊有兩個可以選，接著是它的回覆。
A login page in Flutter! 📱💻 Here's a step-by-step guide to help you create one:
Step 1: Create a new Flutter project
Open your terminal or command prompt and run the following command:
flutter create my_login_app
This will create a new Flutter project called my_login_app.
Step 2: Add dependencies
In the pubspec.yaml file, add the following dependencies:
dependencies:
flutter:
sdk: flutter
fluttertoast: ^8.0.5
flutter/material.dart: ^8.3.1
The fluttertoast package is used to display a toast message when the user submits the login form.
Step 3: Create the login page
Create a new file called login_page.dart in the lib directory:
// lib/login_page.dart
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _username, _password;
void _submit() async {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// Call your API or database to authenticate the user
// For demonstration purposes, we'll just display a toast message
Fluttertoast.showToast(msg: 'Login successful!');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'Username',
border: OutlineInputBorder(),
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your username';
}
return null;
},
onSaved: (value) => _username = value,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
obscureText: true, // Hide password input
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
return null;
},
onSaved: (value) => _password = value,
),
SizedBox(height: 32),
ElevatedButton(
onPressed: _submit,
child: Text('Login'),
)
],
),
),
),
);
}
}
This code defines a LoginPage widget that contains a form with two text fields (username and password) and an elevated button to submit the form. The _submit method is called when the user clicks the button, which validates the form data and displays a toast message if the login is successful.
Step 4: Add the login page to your app
In the main.dart file, add the following code:
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:my_login_app/login_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Login App',
home: LoginPage(),
);
}
}
This code creates a new MaterialApp widget and sets the LoginPage as its home page.
Step 5: Run your app
Run the following command in your terminal or command prompt:
flutter run
This will launch your app on an emulator or physical device. You can then test your login page by entering a username and password, clicking the "Login" button, and verifying that the toast message is displayed.
That's it! You now have a basic login page in Flutter. 🎉
如此，就順利在 Web 介面使用對話機器人了，是不是跟 ChatGPT 相去不遠呢？
這次就分享到這，感謝您的閱讀。
繼續閱讀｜回目錄