Embedded Files
下載並安裝 Ollama https://ollama.com/download
開啟 Ollama (不會有任何畫面顯示, 僅在工作列可看到圖示)
開啟命令提示字元
於命令提示字元, 透過命令下載 genna2:2b 語言模型
ollama pull gemma2:2b
可下載其他語言模型, 建議先從較小的模型開始嘗試 https://www.ollama.com/search
於命令提示字元啟動語言模型
ollama run gemma2:2b
修改 CORS 設定 https://objectgraph.com/blog/ollama-cors/
撰寫 HTML, CSS, JavaScript, 透過 JavaScript 與 Ollama 上的語言模型互動 (參考語法如下)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大語言模型</title>
<style>
body {margin: 2em;}
textarea {width: 100%; height: 100px;}
#response {white-space: pre-wrap; margin-top: 1em; background: #f0f0f0; padding: 1em; border-radius: 5px;}
</style>
</head>
<body>
<h1>大語言模型</h1>
<label for="model">模型名稱: </label>
<input type="text" id="model" value="gemma2:2b">
<br><br>
<textarea id="prompt" placeholder="輸入問題"></textarea><br>
<button onclick="callOllama()">送出</button>
<div id="response"></div>
<script>
async function callOllama() {
const prompt = document.getElementById('prompt').value;
const model = document.getElementById('model').value;
const responseDiv = document.getElementById('response');
responseDiv.textContent = '請稍候';
try {
const res = await fetch('http://127.0.0.1:11434/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: model,
prompt: prompt,
stream: false
})
});
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
const data = await res.json();
responseDiv.textContent = data.response;
} catch (err) {
responseDiv.textContent = '錯誤：' + err.message;
}
}
</script>
</body>
</html>
Page updated
Report abuse