chili3d调试笔记5 直接加入js和大模型对话 trae

TypeScript 复制代码
// 定义一个异步函数来生成请求选项并发送请求
export async function send_to_llm(mycontent:String ): Promise<string> {
    const myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer sk-240e8a769152439594a0c4c17618db9c");
    myHeaders.append("Content-Type", "application/json");
  
    const raw = JSON.stringify({
      messages: [
        { content: mycontent, role: "user" },
        { content: "you are a helpful assistant", role: "system" }
      ],
      model: "deepseek-chat"
    });
  
    const requestOptions: RequestInit = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow' as RequestRedirect
    };
  
    try {
      const response = await fetch("https://api.deepseek.com/v1/chat/completions", requestOptions);
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const result = await response.text();
      console.log(result); // 可选:打印日志以便调试
      return result;
    } catch (error) {
      console.error('Error in send_to_llm:', error);
      throw error; // 将错误抛出以便调用方处理
    }
  }
TypeScript 复制代码
import { I18n, Logger } from "chili-core";
import { button, div, input, label } from "../components";
import style from "../dialog.module.css";
import { send_to_llm } from "./send_to_llm";
export class njsgcs_Dialog {
    private constructor() {}
    static show() { 
        const dialog = document.createElement("dialog");
        document.body.appendChild(dialog);

        // 创建输入框并保存引用
        const user_say_input = input({
            type: "text",
            id: "njsgcs_test_input",
            onkeydown: (e: KeyboardEvent) => {
                e.stopPropagation();
            },
        });

        // 创建 label 元素并保存引用
        const resultLabel = label({ textContent: "" });

        dialog.appendChild(
            div(
                { className: style.root },
                div({ className: style.title }, label({ textContent: I18n.translate("njsgcs_showDialog") })),
                div({ className: style.input }, user_say_input),
                div(
                    { className: style.buttons },
                    button({
                        textContent: I18n.translate("common.confirm"),
                        onclick: async () => {
                            try {
                                // 动态获取输入框的值
                                let response: string = await send_to_llm(user_say_input.value);
                                // 将 response 解析为 JSON 对象
                                const jsonResponse = JSON.parse(response);
                                let content_response: string = jsonResponse.choices[0].message.content;
                                Logger.info(content_response);
                                // 将 content_response 赋值给 label
                                resultLabel.textContent = content_response;
                            } catch (error) {
                                Logger.error("Failed to parse response as JSON:", error);
                            }
                        },
                    }),
                ),
                // 添加结果显示区域
                div({ className: style.result }, resultLabel)
            ),
        );

        dialog.showModal();
    }
}
相关推荐
05候补工程师10 分钟前
【期末/408冲刺】软件工程核心考点与大题通关秘籍(附图解与解题套路)
大数据·hadoop·经验分享·笔记·软件工程
超人不会飞_Jay14 分钟前
2026.6.4 Vue用户中心项目笔记
前端·vue.js·笔记
中屹指纹浏览器17 分钟前
2026WebGL2着色器浮点精度与帧缓存像素指纹溯源及内核渲染层差异化改造详解
经验分享·笔记
YunQuality23 分钟前
老牌连接器大厂盛凌电子启动QMS数字化升级:制造企业的质量内卷,终于不靠“人盯人”了
笔记·制造·职场·工业软件
Lucky_ldy24 分钟前
51单片机的学习下(结合中科协的个人自用笔记)
笔记·学习·51单片机
钟灵9211 小时前
C++【模板初阶】
开发语言·c++·笔记·c#
江屿风1 小时前
【C++笔记】vector流食般投喂
开发语言·c++·笔记
星恒随风1 小时前
Python 基础语法详解(3):顺序语句、条件语句和循环语句一篇讲清楚
开发语言·笔记·python·学习
数智工坊1 小时前
周志华《Machine Learning》学习笔记--第九章--聚类
笔记·学习·机器学习
星恒随风1 小时前
C++入门(二):函数重载、引用、const引用和 inline 内联函数
开发语言·c++·笔记·学习