diff --git a/static/mylomen.html b/static/mylomen.html
index 1ad223a..a0f6285 100644
--- a/static/mylomen.html
+++ b/static/mylomen.html
@@ -98,6 +98,36 @@
         .myheader-item {
             margin: 1rem 2rem;
         }
+
+        .cha {
+            width: 20px;
+            height: 20px;
+            margin: auto;
+            position: relative;
+            left: calc(50% - 2.5rem);
+        }
+
+        .cha::before,
+        .cha::after {
+            content: "";
+            position: absolute;
+            /*方便进行定位*/
+            height: 20px;
+            width: 1.5px;
+            top: 2px;
+            right: 9px;
+            /*设置top和right使图像在20*20框中居中*/
+            background: #10100f;
+        }
+
+        .cha::before {
+            transform: rotate(45deg);
+            /*进行旋转*/
+        }
+
+        .cha::after {
+            transform: rotate(-45deg);
+        }
     </style>
 </head>
 
@@ -108,6 +138,9 @@
     <div id="myMaskContent" style="display: none;">
         <div id="myMask"><!-- 这是遮罩层 --></div>
         <div class="myPopWindow4Login">
+            <p>
+                <div class="cha" style="align-self: flex-end;" onclick="exitToMyLogin()"></div>
+            </p>
             <h1>账号登录</h1>
             <form method="post" autocomplete="off" onsubmit="return false">
                 <p>
@@ -189,7 +222,261 @@
 </header>
 
 <section style="min-height: 800px; background-color: #f8f7fa;">
-    <iframe src="ai-chat1.html"></iframe>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .container {
+            display: flex;
+            height: 90vh;
+        }
+
+        .left-panel {
+            flex: 15%;
+            background-color: #f2f2f2;
+            padding: 10px;
+        }
+
+        .right-panel {
+            flex: 85%;
+            background-color: #ffffff;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .chat-log {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+
+        .chat-bubble {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .user-bubble {
+            justify-content: flex-end;
+        }
+
+        .bubble-content {
+            padding: 10px 15px;
+            border-radius: 20px;
+        }
+
+        .user-bubble .bubble-content {
+            background-color: #d6eaff;
+            color: #000000;
+        }
+
+        .ai-bubble .bubble-content {
+            background-color: #e5ece7;
+            color: #000;
+        }
+
+        .input-area {
+            display: flex;
+            align-items: center;
+            padding: 20px;
+        }
+
+        .input-text {
+            flex: 1;
+            padding: 10px;
+            margin-right: 10px;
+        }
+
+        .submit-button {
+            padding: 10px 20px;
+            background-color: #2196f3;
+            color: #ffffff;
+            border: none;
+            cursor: pointer;
+        }
+
+        li {
+            margin-top: 10px;
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        table {
+            border: 1px solid #000;
+            border-collapse: collapse;
+        }
+
+        table td, table th {
+            border: 1px solid #000;
+        }
+
+        table td, table th {
+            padding: 10px;
+        }
+
+        .language-sql {
+            width: 95%;
+            background-color: #F6F6F6;
+            padding: 10px;
+            font-weight: bold;
+            border-radius: 5px;
+            word-wrap: break-word;
+            white-space: pre-line;
+            /* overflow-wrap: break-word; */
+            display: block;
+        }
+
+        select {
+            width: 100%;
+            height: 30px;
+            border: 2px solid #6089a4;
+            font-size: 15px;
+            margin-top: 5px;
+        }
+        .recommendation{
+            color: #1c4cf3;
+            margin-top: 10px;
+        }
+
+    </style>
+    <div class="container">
+        <!--    <div class="left-panel">-->
+        <!--        <h2>AI文本助手</h2>-->
+        <!--        <h3>常用问题</h3>-->
+        <!--        <div class="recommendation">Java 21有什么新特性</div>-->
+        <!--        <div class="recommendation">红烧肉怎么做</div>-->
+        <!--    </div>-->
+        <div class="right-panel">
+            <div class="chat-log" id="chat-log">
+
+            </div>
+            <div class="input-area">
+                <input type="text" id="user-input" class="input-text" placeholder="请输入您的问题,回车或点击发送确定。">
+                <button id="submit" style="margin-left: 10px;width: 100px" onclick="sendMessage()" class="submit-button">
+                    发送
+                </button>
+                <button style="margin-left: 20px;width: 100px;background-color: red" onclick="clearChat()"
+                        class="submit-button">clear
+                </button>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
+    <script>
+        /*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
+
+        // 添加AI信息
+        function addAIMessage(message) {
+            $("#chat-log").append(
+                "<div class=\"chat-bubble ai-bubble\">\n" +
+                "    <div class=\"bubble-content\">" + message + "</div>\n" +
+                "</div>"
+            )
+        }
+
+        // 添加人类信息
+        function addUserMessage(message) {
+            $("#chat-log").append(
+                "<div class=\"chat-bubble user-bubble\">\n" +
+                "    <div class=\"bubble-content\">" + message + "</div>\n" +
+                "</div>"
+            )
+        }
+
+        // 滑动到底部
+        function slideBottom() {
+            let chatlog = document.getElementById("chat-log");
+            chatlog.scrollTop = chatlog.scrollHeight;
+        }
+
+        // 调用api
+        function chatApi(msg) {
+            slideBottom();
+
+            // messagesList.push({role: "user", content: msg});
+            const body = JSON.stringify({ "prompt": msg});
+            // alert(body)
+            $.ajax({
+                method: 'POST',
+                url: '/v1/ai/completionsTest',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                data: body,
+                success: function (res) {
+                    // let res1=res?.choices[0]?.message?.content;
+                    // res1 = DOMPurify.sanitize(marked.parse(res1));
+                    // addAIMessage(res1);
+
+                    if (res.code === 0) {
+                        let answer = res.data;
+                        // answer = marked.parse(answer);
+                        answer = DOMPurify.sanitize(marked.parse(answer));
+                        addAIMessage(answer);
+                        // messageHistory = res.history;
+                    } else {
+                        addAIMessage("服务接口调用错误。");
+                    }
+                },
+                error: function (e) {
+                    addAIMessage("服务接口调用异常。");
+                }
+            });
+        }
+
+        // 发送消息
+        function sendMessage() {
+            let userInput = $('#user-input');
+            let userMessage = userInput.val();
+            if (userMessage.trim() === '') {
+                return;
+            }
+            userInput.val("");
+
+            // answer = DOMPurify.sanitize(marked.parse(userMessage));
+
+            addUserMessage(DOMPurify.sanitize(marked.parse(userMessage)));
+            chatApi(userMessage);
+        }
+
+        // 清空聊天记录
+        function clearChat() {
+            $("#chat-log").empty();
+            addAIMessage("你好，请输入你想问的问题。");
+        }
+
+        // 初始化
+        function init() {
+            addAIMessage("你好，请输入你想问的问题。");
+            let submit = $("#submit");
+            let userInput = $("#user-input");
+            let focus = false;
+            // 监听输入框焦点
+            userInput.focus(function () {
+                focus = true;
+            }).blur(function () {
+                focus = false;
+            });
+            // 回车监听事件
+            document.addEventListener("keydown", function (event) {
+                if (event.key === 'Enter') {
+                    console.log(focus);
+                    if (focus) {
+                        submit.click();
+                    }
+                }
+            });
+        }
+        init();
+    </script>
+
 </section>
 
 <footer style="display: flex; justify-content:center; height: 80%; font-size: 1.5rem; background-color:black;">
@@ -232,6 +519,10 @@
         document.getElementById("myMaskContent").style.display = "block"
     }
 
+    function exitToMyLogin(){
+        document.getElementById("myMaskContent").style.display = "none"
+    }
+
 
     function goToMyLogout() {
         let myTag4show = document.getElementById("myInfo").getAttribute('myTag4show')