简单网站开发工具,大学生心里健康网站设计与建设,做网站的说3年3年包括什么软件,免费网站如何做宣传#x1f4cb; 项目概述#xff08;源码已放在文章末尾#xff09;这是一个完整的房树人#xff08;House-Tree-Person#xff09;心理测试AI分析系统#xff0c;结合了Django后端、微信小程序前端和通义千问VL大模型。系统允许用户绘制或上传房树人图像#xff0c;通过A… 项目概述源码已放在文章末尾这是一个完整的房树人House-Tree-Person心理测试AI分析系统结合了Django后端、微信小程序前端和通义千问VL大模型。系统允许用户绘制或上传房树人图像通过AI进行专业的心理分析并生成详细的分析报告。技术栈涵盖后端Django 4.2 Django REST Framework前端微信小程序原生开发 Canvas APIAI模型通义千问VL大模型图像理解能力数据库SQLite3可扩展至MySQL/PostgreSQL支付系统完整微信支付集成系统实现了用户绘制/上传房树人图像 → AI智能分析 → 生成专业心理报告的全流程。️ 技术架构设计系统架构图┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 微信小程序前端 │───▶│ Django后端API │───▶│ AI大模型服务 │ │ │ │ │ │ │ │ • Canvas绘画板 │ │ • RESTful API │ │ • 通义千问VL │ │ • 图片上传 │ │ • 流式响应 │ │ • 图像理解 │ │ • 支付集成 │ │ • 数据库操作 │ │ • 心理分析 │ │ • 广告组件 │ │ • 异步任务 │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ │ 数据库 │ │ │ │ • 用户记录 │ │ • 分析结果 │ │ • 订单信息 │ └─────────────────┘技术架构特点前后端分离微信小程序前端 Django REST API后端流式响应改善AI分析长时等待体验支付集成完整微信支付系统对接微服务化AI服务独立便于扩展和替换 核心技术实现1. Canvas绘画板技术实现微信小程序Canvas绘图// pages/draw/draw.js - 核心绘图逻辑 Page({ data: { ctx: null, canvas: null, isDrawing: false, lastX: 0, lastY: 0, lineWidth: 5, currentColor: #2c3e50 }, // 初始化Canvas - 处理高清屏适配 initCanvas() { const query wx.createSelectorQuery() query.select(#drawCanvas) .fields({ node: true, size: true }) .exec((res) { const canvas res[0].node const ctx canvas.getContext(2d) // 设备像素比适配 const dpr wx.getSystemInfoSync().pixelRatio canvas.width res[0].width * dpr canvas.height res[0].height * dpr ctx.save() ctx.scale(dpr, dpr) // 设置画笔属性 ctx.lineCap round ctx.lineJoin round ctx.lineWidth this.data.lineWidth ctx.strokeStyle this.data.currentColor this.setData({ ctx, canvas }) }) }, // 触摸事件处理 touchStart(e) { const { x, y } e.touches[0] this.setData({ isDrawing: true, lastX: x, lastY: y }) }, touchMove(e) { if (!this.data.isDrawing) return const { x, y } e.touches[0] const { ctx, lastX, lastY } this.data // 贝塞尔曲线平滑绘制 ctx.beginPath() ctx.moveTo(lastX, lastY) ctx.lineTo(x, y) ctx.stroke() this.setData({ lastX: x, lastY: y }) } })图片上传和适配处理// 图片上传和Canvas绘制适配 chooseImage() { wx.chooseImage({ count: 1, success: (res) { const tempFilePath res.tempFilePaths[0] const image this.data.canvas.createImage() image.src tempFilePath image.onload () { const { ctx, canvas } this.data // 计算图片适配尺寸 - 保持宽高比 const imageRatio image.width / image.height const canvasRatio canvas.width / canvas.height let drawWidth, drawHeight, x, y if (imageRatio canvasRatio) { // 图片更宽以宽度为基准 drawWidth canvas.width drawHeight canvas.width / imageRatio x 0 y (canvas.height - drawHeight) / 2 } else { // 图片更高以高度为基准 drawHeight canvas.height drawWidth canvas.height * imageRatio x (canvas.width - drawWidth) / 2 y 0 } // 清除画布并绘制图片 ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(image, x, y, drawWidth, drawHeight) } } }) }2. Django后端AI分析系统核心分析接口实现# apps/users/views.py - AI分析核心逻辑 csrf_exempt require_http_methods([POST]) def analyze(request): try: # 解析请求数据 data json.loads(request.body) image_data data.get(image) if not image_data: return JsonResponse({error: 未接收到图片数据}, status400) # 初始化通义千问VL大模型 model ChatOpenAI( modelqwen3-vl-plus, openai_api_keysettings.OPENAI_API_KEY, temperature0.0, request_timeout300, max_retries1, max_tokens8192, base_urlhttps://dashscope.aliyuncs.com/compatible-mode/v1, ) # 构建心理学分析Prompt prompt ChatPromptTemplate.from_messages([ (system, config.PROMPT_INSTRUCTIONS_HTML), (user, [ {type: text, text: 这是我画的请帮我分析}, {type: image_url, image_url: {url: f{image_data}}}, ]), ]) chain prompt | model # 流式响应生成器 - 实时返回分析结果 def generate(): analysis_results for chunk in chain.stream({image_data: image_data}): analysis_results chunk.content yield json.dumps({ type: text, content: chunk.content }) \n # 保存分析记录到数据库 record AnalysisRecord.objects.create( image_dataimage_data, analysis_resultanalysis_results, request_timedatetime.now(), process_duration(datetime.now() - request_start_time).total_seconds(), payment_statusunpaid ) yield json.dumps({ type: objectID, content: f{str(record.id)} }) \n # 返回流式HTTP响应 return StreamingHttpResponse(generate(), content_typeapplication/json) except Exception as e: logger.error(f分析失败: {str(e)}) return JsonResponse({error: str(e)}, status500)数据库模型设计# apps/users/models.py - 数据模型设计 class AnalysisRecord(models.Model): 房树人测试分析记录 id models.UUIDField(primary_keyTrue, defaultuuid.uuid4, editableFalse) image_data models.TextField(verbose_name图片数据) analysis_result models.TextField(verbose_name分析结果) request_time models.DateTimeField(verbose_name请求时间) process_duration models.FloatField(verbose_name处理用时(秒)) payment_status models.CharField( max_length20, defaultunpaid, verbose_name支付状态, choices[(unpaid, 未支付), (paid, 已支付)] ) created_at models.DateTimeField(auto_now_addTrue, verbose_name创建时间) class Meta: verbose_name 分析记录 verbose_name_plural 分析记录 ordering [-created_at] def __str__(self): return f分析记录 {self.id} - {self.payment_status} class HTPOrder(models.Model): 房树人测试订单 out_trade_no models.CharField(max_length100, uniqueTrue, verbose_name订单号) status models.CharField( max_length20, defaultunpaid, verbose_name订单状态, choices[(unpaid, 未支付), (paid, 已支付)] ) timestamp models.DateTimeField(auto_now_addTrue, verbose_name创建时间) class Meta: verbose_name 订单 verbose_name_plural 订单 ordering [-timestamp] def __str__(self): return f订单 {self.out_trade_no} - {self.status}3. AI Prompt工程实现心理学分析Prompt设计# config.py - 专业心理学Prompt设计 PROMPT_INSTRUCTIONS_HTML # Role 心理测试分析师分析用户绘制的房树人测试图提供个性化解读和心理建议。 ## Action 模型基于用户提供的房树人测试图逐一分析房子、树和人物的细节、结构、比例、位置以及其他特征。通过这些元素的分析评估用户的心理状态、性格特征、潜在情感需求并给出针对性的心理暗示与建议。 ## Skills - 扎实的心理学理论基础尤其是在投射测试和心理评估方面 - 优秀的观察力和敏锐的心理分析能力能够解读绘画中的微妙心理信号 - 精确的语言表达与总结能力能够将复杂的心理信息转化为通俗易懂的分析结果 - 熟练掌握房树人测试的框架和解读方法 - 能够灵活应对不同绘画风格适应性地调整分析角度 ## Format - 输出结果使用HTML排版确保内容结构清晰易于用户阅读。 - 每个分析部分如房子、树、人物等需分别作为一个独立的div区块包含标题和具体分析内容。 - 每个分析内容分为小节涵盖具体的心理解读并在适当位置加入心理暗示和总结建议。 - 分析内容应简洁明了避免复杂的心理学术语确保用户易于理解。 - 每段文字都必须使用标签包裹以便于前端解析。 ## Constraints - 每个分析部分需包含详细的心理解读并根据绘画的细节、比例、结构等给出具体的建议。 - 保证分析结果层次分明每个部分都应清晰标明标题和分析内容。 - 内容应具有较高的专业性但避免过于学术化语言要易于理解。 - HTML排版结构需语义化确保便于网页呈现和用户浏览。 4. 支付系统技术实现微信小程序支付集成// pages/report/report.js - 支付功能实现 getPayOrderId() { const that this const secretKey ylA82pMGHHkUYXw0Mgb5xasXQoScPX8n const resultId this.data.resultId var params { pid: 20230210011731, cid: 10450, type: wxpay, out_trade_no: resultId, notify_url: app.globalData.host /htp/api/payment_notification_by_no, name: 房树人心理测试, money: that.data.price, clientip: 192.168.1.100, device: pc, param: resultId, sign_type: MD5, }; // 生成MD5签名 const sign generateSign(params, secretKey); params.sign sign; // 调用支付接口 wx.request({ url: https://zpayz.cn/mapi.php, method: POST, data: params, header: { content-type: application/x-www-form-urlencoded }, success(res) { if(res.data res.data.code 1) { // 显示支付二维码 that.setData({ qrCodeImage: res.data.img }); // 轮询查询支付状态 const intervalId setInterval(() { wx.request({ url: app.globalData.host /htp/api/check_payment_status_by_no, method: GET, data: { out_trade_no: resultId }, success(response) { if (response.data.payment_status paid) { clearInterval(intervalId); that.setData({ loading: true }); that.analyzeDrawing(); // 支付成功后调用分析 } } }); }, 2000); } } }); }Django支付回调处理# apps/users/views.py - 支付回调接口 require_http_methods([GET]) def payment_notification_by_no(request): try: # 获取所有请求参数 params request.GET.dict() print(接收到的支付通知参数:, params) # 从参数中获取param值 param params.get(param) # 检查交易状态 trade_status params.get(trade_status) if trade_status TRADE_SUCCESS: # 创建或更新订单记录 order, created HTPOrder.objects.get_or_create( out_trade_noparam, defaults{status: paid} ) if not created: order.status paid order.save() print(f订单记录 {param} 添加/更新成功) # 返回成功响应 return HttpResponse(success) except Exception as e: return JsonResponse({error: str(e)}, status500)5. 流式响应处理技术前端流式响应解析// 流式响应处理 - 实时显示AI分析结果 analyzeDrawing() { const startTime Date.now() const that this wx.request({ url: app.globalData.host /htp/api/analyze, method: POST, data: { image: this.data.drawingImage }, timeout: 180000, responseType: text, success(res) { const lines res.data.split(\n) let content for (const line of lines) { if (!line.trim()) continue try { const data JSON.parse(line) if (data.type text) { // 处理HTML内容 let processedContent data.content .replaceAll(, ) .replaceAll(html, ) .replaceAll(h4, h4 styleborder-left: 4px solid #4a90e2;padding-left: 15px;color:#4a90e2;margin: 20px 0;) content processedContent } } catch (e) { console.error(解析错误:, e) } } that.setData({ loading: false, analysisContent: content, analysisTime: ((Date.now() - startTime) / 1000).toFixed(2) }) } }) } 部署与配置1. 环境配置# 安装Python依赖 pip install -r requirements.txt # 数据库迁移 python manage.py migrate2. Django配置# settings.py - 关键配置 INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, rest_framework, django_celery_results, apps.users ] # Celery配置 CELERY_BROKER_URL redis://localhost:6379/0 CELERY_RESULT_BACKEND redis://localhost:6379/0 CELERY_ACCEPT_CONTENT [json] CELERY_TASK_SERIALIZER json CELERY_RESULT_SERIALIZER json CELERY_TIMEZONE Asia/Shanghai3. 启动服务# 启动Django服务 python manage.py runserver 0.0.0.0:8000 项目总结技术亮点全栈开发完整的Django后端 微信小程序前端AI集成通义千问VL大模型的深度集成流式响应改善用户体验的实时反馈机制支付系统完整微信支付集成跨平台微信小程序的多设备兼容性学习价值通过这个项目开发者可以学习到Django REST Framework的API设计微信小程序Canvas绘图技术AI大模型的集成与应用流式响应的实现原理支付系统对接技术生产环境的部署和优化应用场景心理教育学校心理辅导工具自我认知个人心理状态评估心理咨询专业咨询师的辅助工具社交娱乐朋友间的心理测试游戏 获取源码完整的项目源码已经整理好包含完整的Django后端代码微信小程序前端代码数据库迁移文件部署配置脚本详细的开发文档支付系统对接代码关注公众号【AI创业指南】回复【房树人源码】即可获取完整项目源码。 技术交流如果在部署或使用过程中遇到任何技术问题欢迎通过以下方式交流在公众号留言技术问题希望这个项目能为你提供有价值的技术参考也欢迎提出技术改进建议和功能需求。立即获取源码开始你的全栈AI项目开发之旅