備忘錄_20160105(定位) 修改 回首頁
程式　2025-12-19　14:28:09　1766125690　100
ollama，從前端的 javascript 執行 (part2)
ollama，從前端的 javascript 執行 (part2)
file:/// 可以存取 http://，而 https:// 可以存取 https://
<!doctype html>
<html lang="zh-Hant-TW">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>測試LLM</title>
    <style>
#inpUrl
{
  width: 40em;
}

textarea
{
  width: 80vw;
  height: 13em;
}
    </style>
  </head>
  <body>
    <div>
      <table>
        <tr>
          <td>url</td>
          <td><input type="text" name="inpUrl" id="inpUrl" value="http://192.168.1.10:11434/api/generate"></td>
        </tr>
        <tr>
          <td>model</td>
          <td>
            <select name="selModel" id="selModel">
              <option>llama3.2:1b</option>
              <option>gemma3:1b</option>
              <option selected>gemma3:12b</option>
              <option>deepseek-r1:1.5b</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>prompt</td>
          <td>
            <textarea name="taInput" id="taInput">請把下面的句子拆分成 客戶名稱，產品名稱，數量，單價。沒有提到的部分請留白。

屏東衛生所訂破傷風疫苗20盒，價格照舊，請備註明天上午到貨，謝謝。
            </textarea>
          </td>
        </tr>
        <tr>
          <td rowspan="2"><button type="button" onclick="gototest();">送出</button></td>
          <td><textarea id="divResult"></textarea></td>
        </tr>
        <tr>
          <td><textarea id="divConversation"></textarea></td>
        </tr>
      </table>
    </div>
    
    <script>

// 執行函式 - 注意同源政策(CORS)的限制！
async function gototest()
{
  var strPrompt=document.getElementById("taInput").value;
  var strUrl=document.getElementById("inpUrl").value;
  var strModel=document.getElementById("selModel").value;
  //var strPrompt="請幫我說明一下下面的敘述。\n\n佛以此願行。與眾生莊嚴四種淨土。\n又以此願行。莊嚴成一句洪名。 ";
  
  var oJsonInput={ model: strModel, prompt: strPrompt, stream: false };
  
  var strText=await fetchOllamaResponseSync(strUrl, oJsonInput);
  document.getElementById("divResult").value=strText;
  
  var oJson=JSON.parse(strText);
  document.getElementById("divConversation").value=oJson.response;
}

async function fetchOllamaResponseSync(strUrl, oJsonInput) 
{
  document.getElementById("divResult").value="please wait...";
  document.getElementById("divConversation").value="please wait...";
  try
  {
    const oResponse=await fetch(
      strUrl,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(oJsonInput)
      }
    );
    
    if(!oResponse.ok)
    {
      throw new Error(`HTTP error! Status: ${oResponse.status}`);
    }
    
    const strText=await oResponse.text();
    return strText;
  }
  catch(oError) 
  {
    return "Error fetching Ollama response:"+oError;
  }
}

    </script>
  </body>
</html>