LLM+js实现大模型对话

代码运行效果图:
前提是你有一个可用的openai服务,然后用下面一个html页即可启动
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Chat with OpenAI</title><style>body {font-family: Arial, sans-serif;}#chat-container {width: 400px;margin: 0 auto;border: 1px solid #ccc;border-radius: 5px;padding: 10px;}#chat-messages {height: 300px;overflow-y: scroll;border: 1px solid #ccc;border-radius: 5px;padding: 10px;margin-bottom: 10px;}#user-input {width: 70%;padding: 5px;}#send-button {padding: 5px 10px;}</style>
</head><body><div id="chat-container"><h2>Chat with OpenAI</h2><div id="chat-messages"></div><input type="text" id="user-input" placeholder="Type your message"><button id="send-button">Send</button></div><script>// 替换为你的OpenAI API密钥const apiKey = 'YOUR_API_KEY';const apiUrl = 'http://10.130.7.6:8000/v1/chat/completions'; //你的openai服务地址document.getElementById('send-button').addEventListener('click', function () {const userInput = document.getElementById('user-input').value;if (userInput.trim() === '') return;const chatMessages = document.getElementById('chat-messages');const userMessageElement = document.createElement('p');userMessageElement.style.color = 'blue';userMessageElement.textContent = `You: ${userInput}`;chatMessages.appendChild(userMessageElement);fetch(apiUrl, {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${apiKey}`},body: JSON.stringify({"model": "Qwen2.5-7B-Instruct", // 你可以选择其他合适的模型"messages": [{"role": "user", "content": userInput}]})}).then(response => response.json()).then(data => {const assistantReply = data.choices[0].message.content;const assistantMessageElement = document.createElement('p');assistantMessageElement.style.color = 'green';assistantMessageElement.textContent = `Assistant: ${assistantReply}`;chatMessages.appendChild(assistantMessageElement);}).catch(error => {console.error('Error:', error);const errorMessageElement = document.createElement('p');errorMessageElement.style.color ='red';errorMessageElement.textContent = 'Error occurred while fetching response.';chatMessages.appendChild(errorMessageElement);});document.getElementById('user-input').value = '';});</script>
</body></html>

运行方式

可直接用python启动建议webui,进入html所在页面(可直接在pycharm控制台里运行):

D:\gradio_project\new_inference0310\0402> python -m http.server 8000

然后打开浏览器访问http://127.0.0.1:8000/test.html即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/76079.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)

一、功能概览和本文核心 本次开发&#xff0c;不是1天干撸&#xff0c;而是在下班后或早起搞的&#xff0c;总体加和计算了一下&#xff0c;大概1天的时间&#xff08;12个小时&#xff09;&#xff0c;平常下班都是9点的衰仔&#xff0c;好在还有双休&#xff0c;谢天谢地。 …

C++实现文件断点续传:原理剖析与实战指南

文件传输示意图 一、断点续传的核心价值 1.1 大文件传输的痛点分析 网络闪断导致重复传输&#xff1a;平均重试3-5次。 传输进度不可回溯&#xff1a;用户无法查看历史进度。 带宽利用率低下&#xff1a;每次中断需从头开始。 1.2 断点续传技术优势 指标传统传输断点续传…

升级 SAP S/4 HANA 之 EWM 攻略

目录 简介 知识点 数据迁移 简介 仓库管理&#xff0c;SAP 升级不管是否启动 EWM 功能&#xff0c;评估 EWM 是必经之路&#xff0c;不仅是因为 EWM 是 SAP 主推的仓库解决方案&#xff0c;更是其功能强大而便捷&#xff0c;不管是简易仓库、复杂仓库、立体仓库、高架仓库、…

知识表示方法之六:过程表示法(Procedural Representation)

在人工智能的发展史中&#xff0c;关于知识的表示方法曾存在两种不同的观点。一种观点认为知识主要是陈述性的&#xff0c;其表示方法应着重将其静态特性&#xff0c;即事物的属性以及事物间的关系表示出来&#xff0c;称以这种观点表示知识的方法为陈述式或说明式表示法&#…

绿色供应链管理体系认证:开启企业可持续发展的绿色新篇章

在全球“双碳”目标驱动下&#xff0c;绿色供应链管理已成为企业高质量发展的核心议题。据国际权威机构预测&#xff0c;到2030年&#xff0c;绿色供应链相关市场规模将突破万亿美元。在此背景下&#xff0c;绿色供应链管理体系认证不仅是企业合规的“通行证”&#xff0c;更是…

MATLAB如何打印一个桃心形状

在MATLAB中打印一个桃心形状&#xff0c;您可以使用绘图函数来创建一个心形图案。以下是一个简单的例子&#xff0c;展示了如何使用MATLAB绘制一个心形&#xff1a; 定义心形的参数方程&#xff1a;心形可以通过一组参数方程来描述。 使用MATLAB的绘图函数&#xff1a;plot函…

前端知识(vue3)

1.Vue3 1.1 介绍 Vue&#xff08;读音 /vjuː/, 类似于 view&#xff09;是一款用于构建用户界面的渐进式的JavaScript框架 官网&#xff1a;https://cn.vuejs.org 1.2 常见指令 指令&#xff1a;指的是HTML 标签上带有 v- 前缀的特殊属性&#xff0c;不同指令具有不同含义…

状态机思想编程

1. LED流水灯的FPGA代码 一个使用状态机思想来实现LED流水灯的FPGA代码 这个例子采用VHDL编写 VHDL代码示例&#xff1a; library IEEE; use IEEE.STD_LOGIC_1164.ALL; use IEEE.STD_LOGIC_ARITH.ALL; use IEEE.STD_LOGIC_UNSIGNED.ALL;entity led_flowing isPort ( clk …

网络安全小知识课堂(五)

病毒与蠕虫&#xff1a;你的电脑为何会 “生病” 和 “传染”&#xff1f; 引言 你是否见过这样的场景&#xff1a;电脑突然弹窗广告暴增&#xff0c;文件莫名消失&#xff0c;甚至整个公司网络集体瘫痪&#xff1f;这些症状背后&#xff0c;可能是 ** 病毒&#xff08;Virus…

RVOS-1.环境搭建与系统引导

0.环境搭建 riscv-operating-system-mooc: 开放课程《循序渐进&#xff0c;学习开发一个 RISC-V 上的操作系统》配套教材代码仓库。 mirror to https://github.com/plctlab/riscv-operating-system-mooc 在 Ubuntu 20.04 以上环境下我们可以直接使用官方提供的 GNU工具链和 QEM…

UNet 改进(5):结合SE模块提升图像分割性能

U-Net是医学图像分割领域最成功的架构之一&#xff0c;其对称的编码器-解码器结构和跳跃连接使其能够有效捕捉多尺度特征。本文将解析一个改进版的U-Net实现&#xff0c;该版本通过引入Squeeze-and-Excitation(SE)模块进一步提升了模型性能。 一、架构概览 这个改进的U-Net保持…

机器人拧螺丝紧固装配(Robot screw fastening assembly)

机器人拧螺丝紧固装配技术正以其高精度、高效率和高灵活性&#xff0c;重塑着传统制造业的生产范式。这项融合了机械臂定位、扭矩控制、视觉引导与数据分析的自动化解决方案&#xff0c;不仅将工人从重复性高强度劳动中解放出来&#xff0c;更通过实时数据反馈与精准执行&#…

图像处理中的 Gaussina Blur 和 SIFT 算法

Gaussina Blur 高斯模糊 高斯模糊的数学定义 高斯模糊是通过 高斯核(Gaussian Kernel) 对图像进行卷积操作实现的. 二维高斯函数定义为 G ( x , y , σ ) 1 2 π σ 2 e − x 2 y 2 2 σ 2 G(x, y, \sigma) \frac{1}{2\pi \sigma^2} e^{-\frac{x^2 y^2}{2\sigma^2}} G(x…

在Unity中实现《幽灵行者》风格的跑酷动作

基础设置 角色控制器选择&#xff1a; 使用Character Controller组件或Rigidbody Capsule Collider 推荐使用Character Controller以获得更精确的运动控制 输入系统&#xff1a; 使用Unity的新输入系统(Input System Package)处理玩家输入 滑铲实现 public class Slide…

青蛙吃虫--dp

1.dp数组有关元素--路长和次数 2.递推公式 3.遍历顺序--最终影响的是路长&#xff0c;在外面 其次次数遍历&#xff0c;即这次路长所有情况都更新 最后&#xff0c;遍历次数自然就要遍历跳长 4.max时时更新 dp版本 #include<bits/stdc.h> using namespace std; #def…

Tiktok 关键字 视频及评论信息爬虫(2) [2025.04.07]

&#x1f64b;‍♀️Tiktok APP的基于关键字检索的视频及评论信息爬虫共分为两期&#xff0c;希望对大家有所帮助。 第一期&#xff1a;基于关键字检索的视频信息爬取 第二期见下文。 1.Node.js环境配置 首先配置 JavaScript 运行环境&#xff08;如 Node.js&#xff09;&…

Matlab绘图—‘‘错误使用 plot输入参数的数目不足‘‘

原因1&#xff1a; ❤️ 文件列名不是合法变量名 在excel中数据列名称为Sample:float,将:删除就解决了

Kotlin问题汇总

Kotlin问题汇总 真机安装调试 查看真机的Android版本&#xff0c;将build.gradle文件中的minSdk改为手机的Android版本&#xff0c;点Sync Now更新设置 apk安装失败 在gradle.properties全局配置中设置android.injected.testOnlyfalse Unresolved reference: 在activity_…

基于VMware的Cent OS Stream 8安装与配置及远程连接软件的介绍

1.VMware Workstation 简介&#xff1a; VMware Workstation&#xff08;中文名“威睿工作站”&#xff09;是一款功能强大的桌面虚拟计算机软件&#xff0c;提供用户可在单一的桌面上同时运行不同的操作系统&#xff0c;和进行开发、测试 、部署新的应用程序的最佳解决方案。…

Go语言从零构建SQL数据库(4)-解析器

SQL解析器&#xff1a;数据库的"翻译官"图解与代码详解 图解SQL解析过程 SQL解析器就像是人类语言与计算机之间的翻译官&#xff0c;将我们书写的SQL语句转换成数据库能够理解和执行的结构。 #mermaid-svg-f9gAqHutDLL4McGy {font-family:"trebuchet ms"…