Day-11 HTML網頁設計的範例-1

2025 iThome 鐵人賽

DAY 11

生成式 AI

30天製作生成式AI的互動網頁專案系列第 11 篇

17th鐵人賽

max

2025-09-09 21:03:59

53 瀏覽

分享至

今天先把我自己做的範例網頁放上來，目前的程式碼還算簡單，整體架構就是一個很陽春的網頁，主要功能是能夠跟後端的程式進行連接，並且透過呼叫 PHI-4 mini 來進行問題的詢問，最後再把回傳的回答呈現在頁面上。這個版本算是第一版，重點先放在確認功能是否能正常運作，所以介面設計和排版都比較簡單。後續我會再針對使用者體驗進行調整，包含畫面美化、字體與顏色的搭配，以及讓回應顯示更直觀的方式，像是分段排版或對話框的設計。除此之外，也會考慮加入額外的功能，例如紀錄使用者的提問歷史，或是提供一些基本的篩選和搜尋機制，讓使用起來更方便。雖然目前只是初步的雛形，但已經能讓我測試與模型互動的效果，也能逐步累積經驗去優化整體的系統。之後希望能把它發展成一個更完整、更美觀的應用網頁，不僅僅是測試工具，而是能真正提供實用功能的平台。

程式碼如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Form</title>
</head>
<body>
    <div style="width: 100vw;text-align: center;">
    <h1>PHI-4網頁問答測試</h1>
    </div>
    <div style="width: 100vw;text-align: center;">
      <form id="userForm" action="/page1" method="post" >
          <label for="Q" style="width: 30%;width: 30%;height : 20%;">提問：</label>
          <input type="text" id="Q" name="Q" style="width:70%;height : 10%;" required><br><br>
          <button type="submit" style="width:30%;height : 10%;">送出</button>
      </form>
    </div>
    <h2>PHI-4回應：</h2>
    <div style="width: 80%;text-align: center;margin: auto;">
      <div style="background-color: #ABBAEA;" id="response"></div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('userForm');  // 確保這裡選擇到正確的表單
            const responseDiv = document.getElementById('response');

            form.addEventListener('submit', function (event) {
                event.preventDefault(); // 阻止預設提交（刷新）

                const formData = new FormData(form); // 將表單資料收集

                fetch('/page1', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.text())
                .then(data => {
                    responseDiv.innerText = data;  // 顯示伺服器回應
                })
                .catch(error => {
                    responseDiv.innerText = '錯誤：' + error;  // 顯示錯誤
                });
            });
        });
    </script>
</body>
</html>

下方是網頁雛形: