基于html的大模型调试页面

news2024/11/30 0:33:59

效果1

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Call Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1200px;
        }
        textarea {
            width: 100%;
            height: 600px;
            padding: 15px;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none;
            outline: none;
            box-sizing: border-box;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
            display: block;
            width: 100%;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        button:hover:enabled {
            background-color: #0056b3;
        }
        h2 {
            margin-top: 20px;
            font-size: 18px;
        }
        .loading {
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-top-color: #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .output {
            margin-top: 20px;
            font-size: 16px;
        }
        pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
    <script>
        async function callApi() {
            // 禁用按钮并显示loading状态
            const button = document.querySelector("button");
            const loadingIndicator = document.getElementById("loading");
            const outputString = document.getElementById("outputString");

            button.disabled = true;
            loadingIndicator.style.display = 'inline-block';
            outputString.innerText = ''; // 清空之前的响应

            // 获取输入框中的字符串
            const inputString = document.getElementById("inputString").value;

            try {
                // 发送POST请求，添加Referer请求头
                const response = await fetch("http://192.168.10.25:8097/XXXXX/exampleChat/chat", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjE4MjE4MDYwNjI0MTMxMzk5NjkiLCJoZWFkUGljSWQiOiIxODIzOTQ4NDQ2NjY4Mjc5ODA5IiwiYWNjb3VudCI6ImFkbWluIiwidXNlck5hbWUiOiLns7vnu5_nrqHnkIblkZgiLCJzdGF0dXMiOjAsInVzZXJSb2xlTGlzdCI6W3sidXNlcklkIjoiMTgyMTgwNjA2MjQxMzEzOTk2OSIsInJvbGVJZCI6IjE4MjA2ODgzNzgxNjYzNjYyMDkiLCJyb2xlTmFtZSI6Iuezu-e7n-euoeeQhuWRmCJ9XSwicGVybWlzc2lvbiI6WyJwX2hvbWUiLCJwX2Nhc2VNYW5hZ2VtZW50IiwicF9jYXNlTWFuYWdlbWVudCIsInBfY2FzZU1hbmFnZW1lbnQiLCJwX2Nhc2VNYW5hZ2VtZW50IiwicF9jYXNlUmVjb3ZlcnkiLCJwX2Nhc2VNYW5hZ2VtZW50IiwicF9jYXNlRGV0YWlscyIsInBfY2FzZU1hbmFnZW1lbnQiLCJwX2Nhc2UyIiwicF9ydWxlIiwicF9ydWxlIiwicF9pbmRleFJ1bGUiLCJwX3J1bGUiLCJwX21vZGVsUnVsZSIsInBfcnVsZSIsInBfYXRvbWljUnVsZSIsInBfc3lzdGVtIiwicF9zeXN0ZW0iLCJwX2FjY291bnRNYW5hZ2VtZW50IiwicF9zeXN0ZW0iLCJwX2NvbmZpZ01hbmFnZW1lbnQiLCJwX3Byb21wdFByb2plY3QiLCJwX3Byb21wdFByb2plY3QiLCJwX3Byb21wdE1hbmFnZW1lbnQiLCJwX3Byb21wdFByb2plY3QiLCJwX3Byb21wdFRlc3QiXSwicmVnaXN0ZXJUaW1lIjoxNzIzMTg3Mzg3MDAwLCJhZG1pbkZsYWciOiIxIiwiZXhwaXJlVGltZSI6MTcyNzI0MzU3NzUxMywiaXNzdWVUaW1lIjoxNzI3MTU3MTc3NTEzfQ.ZVhspAz5tSr0J1s1XAjGKDBAfhWLEXI2t70DeQWir6E" // 添加Referer请求头
                    },
                    body: JSON.stringify({ message: inputString }) // 传入字符串
                });

                // 解析返回的JSON数据
                const result = await response.json();

                // 将返回的JSON结果进行格式化并展示
                outputString.innerHTML = "<pre>" + JSON.stringify(result, null, 4) + "</pre>";
            } catch (error) {
                outputString.innerText = 'Error occurred: ' + error.message;
            } finally {
                // 解除loading状态并启用按钮
                button.disabled = false;
                loadingIndicator.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>API Call Example</h1>
        <div>
            <label for="inputString">Enter a string:</label>
            <textarea id="inputString" placeholder="Type something..."></textarea>
            <button onclick="callApi()">Submit</button>
            <div id="loading" class="loading" style="display:none;"></div>
        </div>
        <div class="output">
            <h2>Response:</h2>
            <div id="outputString"></div>
        </div>
    </div>
</body>
</html>

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Call Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
        }
        textarea {
            width: 100%;
            height: 150px;
            padding: 15px;
            font-size: 18px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: none;
            outline: none;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
            display: block;
            width: 100%;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        button:hover:enabled {
            background-color: #0056b3;
        }
        h2 {
            margin-top: 20px;
            font-size: 18px;
        }
        .loading {
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-top-color: #007bff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .output {
            margin-top: 20px;
            font-size: 16px;
        }
        pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 400px;
            overflow-y: auto;
        }
    </style>
    <script>
        async function callApi() {
            // 禁用按钮并显示loading状态
            const button = document.querySelector("button");
            const loadingIndicator = document.getElementById("loading");
            const outputString = document.getElementById("outputString");

            button.disabled = true;
            loadingIndicator.style.display = 'inline-block';
            outputString.innerText = ''; // 清空之前的响应

            // 获取输入框中的字符串
            const p1 = document.getElementById("p1").value;
            const p2 = document.getElementById("p2").value;

            try {
                // 发送POST请求，添加Referer请求头
                const response = await fetch("http://192.168.10.25:8097/exampleChat/chat", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ assistantMessage: p1, userMessage: p2 }) // 传入p1和p2参数
                });

                // 解析返回的JSON数据
                const result = await response.json();

                // 将返回的JSON结果进行格式化并展示
                outputString.innerHTML = "<pre>" + JSON.stringify(result, null, 4) + "</pre>";
            } catch (error) {
                outputString.innerText = 'Error occurred: ' + error.message;
            } finally {
                // 解除loading状态并启用按钮
                button.disabled = false;
                loadingIndicator.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>API Call Example</h1>
        <div>
            <label for="p1">Enter assistantMessage:</label>
            <textarea id="p1" placeholder="Type assistantMessage..."></textarea>

            <label for="p2">Enter userMessage:</label>
            <textarea id="p2" placeholder="Type userMessage..."></textarea>

            <button onclick="callApi()">Submit</button>
            <div id="loading" class="loading" style="display:none;"></div>
        </div>
        <div class="output">
            <h2>Response:</h2>
            <div id="outputString"></div>
        </div>
    </div>
</body>
</html>