住房城乡建设部门户网站主页,公司注册网上核名官网,做网站怎么去文化局备案,电商网站开发技术与维护#x1f388;#x1f388;效果预览#x1f388;#x1f388;
❤ 路劲规划 ❤ 功能总览 ❤ ChatGPT交互 一、需求背景
五一假期即即将到来#xff0c;在大家都阳过之后#xff0c;截止到目前这应该是最安全的一个假期。所以出去旅游想必是大多数人的选择。
然后#x… 效果预览
❤ 路劲规划 ❤ 功能总览 ❤ ChatGPT交互 一、需求背景
五一假期即即将到来在大家都阳过之后截止到目前这应该是最安全的一个假期。所以出去旅游想必是大多数人的选择。
然后就在我们做出外出游玩的决定后制作旅游攻略就成了我们的心头大事我是谁我要去哪里我要怎么去
体验过ChatGPT的小伙伴都知道他有一个旅游攻略规划的能力还是很给力的基于此我们这次动手做一个结合高德地图ChatGPT旅游攻略规划小程序 二、项目原理及架构
2.1 实现原理
1通过咨询ChatGPT生成包含具体地址的旅游攻略 2咨询ChatGPT生成相应地方的经纬度信息 3指定ChatGPT生成特定类型的攻略 2.2 技术架构 2.3 技术栈
模块语言及框架涉及的技术要点小程序前端基于VUE 2.0语法Uni-app跨平台开发框架Http接口通信、Flex布局方式、uView样式库的使用、JSON数据解析、定时器的使用小程序接口服务端Python Flask WEB框架rest接口的开发、 ChatGPT API接口的数据对接 、 前后端websocket实时通信 2.4 数据交互原理 #mermaid-svg-bZMDzuwpWeS9rtcc {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .error-icon{fill:#552222;}#mermaid-svg-bZMDzuwpWeS9rtcc .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-bZMDzuwpWeS9rtcc .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-bZMDzuwpWeS9rtcc .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-bZMDzuwpWeS9rtcc .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-bZMDzuwpWeS9rtcc .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-bZMDzuwpWeS9rtcc .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-bZMDzuwpWeS9rtcc .marker{fill:#333333;stroke:#333333;}#mermaid-svg-bZMDzuwpWeS9rtcc .marker.cross{stroke:#333333;}#mermaid-svg-bZMDzuwpWeS9rtcc svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-bZMDzuwpWeS9rtcc .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .cluster-label text{fill:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .cluster-label span{color:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .label text,#mermaid-svg-bZMDzuwpWeS9rtcc span{fill:#333;color:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .node rect,#mermaid-svg-bZMDzuwpWeS9rtcc .node circle,#mermaid-svg-bZMDzuwpWeS9rtcc .node ellipse,#mermaid-svg-bZMDzuwpWeS9rtcc .node polygon,#mermaid-svg-bZMDzuwpWeS9rtcc .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-bZMDzuwpWeS9rtcc .node .label{text-align:center;}#mermaid-svg-bZMDzuwpWeS9rtcc .node.clickable{cursor:pointer;}#mermaid-svg-bZMDzuwpWeS9rtcc .arrowheadPath{fill:#333333;}#mermaid-svg-bZMDzuwpWeS9rtcc .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-bZMDzuwpWeS9rtcc .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-bZMDzuwpWeS9rtcc .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-bZMDzuwpWeS9rtcc .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-bZMDzuwpWeS9rtcc .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-bZMDzuwpWeS9rtcc .cluster text{fill:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc .cluster span{color:#333;}#mermaid-svg-bZMDzuwpWeS9rtcc div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-bZMDzuwpWeS9rtcc :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 选择操作模式 数据交互 构造问题数据发送 通过API接口返回回答数据 用户 小程序 小程序后端服务 ChatGPT 三、项目功能的实现
3.1 ChatGPT API的接入
要接入ChatGPT API需要按照以下步骤进行操作
注册一个账号并登录到OpenAI的官网https://openai.com/在Dashboard页面上创建一个API密钥。在“API Keys”选项卡下点击“Generate New Key”按钮。将生成的密钥保存好以备后续使用。选择所需的API服务例如“Completion” API以使用OpenAI的文本生成功能。 使用Python调用ChatGPT API实现代码如下
方法一使用request库
import requests
import json# 构建API请求
url https://api.openai.com/v1/engines/davinci-codex/completions
headers {Content-Type: application/json,Authorization: Bearer YOUR_API_KEY}
data {prompt: Hello, my name is,max_tokens: 5
}# 发送API请求
response requests.post(url, headersheaders, datajson.dumps(data))# 解析API响应
response_data json.loads(response.text)
generated_text response_data[choices][0][text]print(generated_text)
方式二使用openAI库
from flask import Flask, request
import openaiapp Flask(__name__)openai.api_key YOUR_API_KEY_HEREapp.route(/)
def home():return Hello, World!app.route(/chat, methods[POST])
def chat():data request.jsonresponse openai.Completion.create(enginedavinci,promptdata[message],max_tokens60)return response.choices[0].textif __name__ __main__:app.run()
3.2 小程序端设计与实现
首页地图菜单栏ChatGPT景点搜索ChatGPT景点推荐––
路线标记 3.3 高德地图服务接入
高德地图开放平台 开通WEB rest 接口服务 在开通了高德地图的API权限之后即可获取到相应的AppID。只需要将APPID填入到项目中的manifest.json文件中即可开启高德地图的路径导航功能的使用 具体步骤如下 具体代码 h5 : {sdkConfigs : {// 使用地图或位置相关功能必须填写其一maps : {qqmap : {// 腾讯地图秘钥 https://lbs.qq.com/dev/console/key/managekey : },google : {// 谷歌地图秘钥HBuilderX 3.2.10https://developers.google.com/maps/documentation/javascript/get-api-keykey : },amap : {// 高德地图秘钥HBuilderX 3.6.0https://console.amap.com/dev/key/appkey : ,// 高德地图安全密钥HBuilderX 3.6.0https://console.amap.com/dev/key/appsecurityJsCode : ,// 高德地图安全密钥代理服务器地址HBuilderX 3.6.0https://lbs.amap.com/api/jsapi-v2/guide/abc/prepareserviceHost : }}}}
}3.4 地图与ChatGPT数据联动功能实现 #mermaid-svg-TlXwjOUu67wq2Qji {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .error-icon{fill:#552222;}#mermaid-svg-TlXwjOUu67wq2Qji .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TlXwjOUu67wq2Qji .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-TlXwjOUu67wq2Qji .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TlXwjOUu67wq2Qji .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TlXwjOUu67wq2Qji .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TlXwjOUu67wq2Qji .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TlXwjOUu67wq2Qji .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TlXwjOUu67wq2Qji .marker.cross{stroke:#333333;}#mermaid-svg-TlXwjOUu67wq2Qji svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TlXwjOUu67wq2Qji .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .cluster-label text{fill:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .cluster-label span{color:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .label text,#mermaid-svg-TlXwjOUu67wq2Qji span{fill:#333;color:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .node rect,#mermaid-svg-TlXwjOUu67wq2Qji .node circle,#mermaid-svg-TlXwjOUu67wq2Qji .node ellipse,#mermaid-svg-TlXwjOUu67wq2Qji .node polygon,#mermaid-svg-TlXwjOUu67wq2Qji .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TlXwjOUu67wq2Qji .node .label{text-align:center;}#mermaid-svg-TlXwjOUu67wq2Qji .node.clickable{cursor:pointer;}#mermaid-svg-TlXwjOUu67wq2Qji .arrowheadPath{fill:#333333;}#mermaid-svg-TlXwjOUu67wq2Qji .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TlXwjOUu67wq2Qji .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TlXwjOUu67wq2Qji .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-TlXwjOUu67wq2Qji .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-TlXwjOUu67wq2Qji .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TlXwjOUu67wq2Qji .cluster text{fill:#333;}#mermaid-svg-TlXwjOUu67wq2Qji .cluster span{color:#333;}#mermaid-svg-TlXwjOUu67wq2Qji div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-TlXwjOUu67wq2Qji :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 生成目标地址的经纬度数据 返回路径数组 ChatGPT接口 小程序高德地图组件 地图标记 核心原理 先通过ChatGPT生成经纬度信息以及每一天的游玩地址注册获取高德API调用权限调用高德API中路径规划导航的接口通过接口返回路径数组将路径数据传递给前端地图组件进行渲染 function Route(){this.key 放置你的高德地图API key;this.url https://restapi.amap.com/v3/direction/driving;this.type driving;
}Route.prototype.setKey function(key){this.keykey;
}
Route.prototype.setUrl function(url){this.urlurl;
}
Route.prototype.setType function(type){this.type type;
}Route.prototype.initParam function(param){Object.assign(this,{...param});
}Route.prototype.drawRoute function(map,origin,destination,line{arrowLine: true,points:[],color:#f00,width:10}){const {url,key,typedriving} this;const {markers[],polyline[]} map;markers.push(origin);markers.push(destination);this.requestRoute(origin,destination).then(res{console.log(res---,res)line.points || (line.points []);res.data.route.paths.map(item{item.steps.map(path{path.tmcs.map(tmcs{tmcs.polyline.split(;).map(loacl{const longitude loacl.split(,)[0];const latitude loacl.split(,)[1];line.points.push({latitude: latitude, longitude: longitude});})});})});polyline.push(line);Object.assign(map,{latitude: origin.latitude,longitude: origin.longitude,// todo 通过距离 计算 scale 的值//scale: 15markers,polyline});});
}Route.prototype.initMap function(object){console.log(object);Object.assign(object,{latitude: 39.90909,longitude: 116.434307,markers: [],polyline: [],scale: 8});
}Route.prototype.requestRoute function(origin,destination){const {url,key} this;return new Promise((resolve,reject){uni.request({url: url,method: GET,data: {origin: origin.longitude,origin.latitude,destination: destination.longitude,destination.latitude,key:key},success: res {resolve(res);},fail: (err) {reject(err);}});})
}export default new Route(); 四、推荐阅读
入门和进阶小程序开发不可错误的精彩内容
《小程序开发必备功能的吐血整理【个人中心界面样式大全】》 《微信小程序 | 借ChatGPT之手重构社交聊天小程序》 《微信小程序 | 人脸识别的最终解决方案》 《微信小程序 基于百度AI从零实现人脸识别小程序》 《吐血整理的几十款小程序登陆界面【附完整代码】》
