SpringBoot对接Midjourney Api

提示:SpringBoot对接Midjourney Api

文章目录

目录

文章目录

后端代码

导包

controller层

工具类层

前端代码

申请API

测试结果



后端代码

导包

        <!--添加hutool的依赖--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency><!-- OkHttp --><dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.9.3</version></dependency><!-- Gson --><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.8.9</version></dependency>

controller层

    @PostMapping("/createimage")public Response createimage(String prompt){System.out.println(prompt);return new Response("0","success",ApiTestUtil.createImage(prompt));}@PostMapping("/fetch")public Response fetch(String jobId){String result = ApiTestUtil.fetch(jobId);return new Response("0","success",result);}

工具类层

    public static String createImage(String prompt) {Map<String, Object> map = new HashMap<>();map.put("prompt", prompt);map.put("mode", "fast");map.put("hookUrl", "");String result = HttpRequest.post("https://api.ttapi.io/midjourney/v1/imagine").body(JSONUtil.toJsonStr(map)).header("TT-API-KEY", "请替换你自己的key").execute().body();System.out.println("绘图请求响应:" + result);return result;}public static String fetch(String jobId){String result = HttpRequest.get("https://api.ttapi.io/midjourney/v1/fetch?jobId=" + jobId).header("TT-API-KEY", "请替换你自己的key").execute().body();System.out.println("绘图结果:" + result);return result;}

前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI Chat Interface</title><!-- 引入 Vue 3 的 CDN --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!-- 引入 Font Awesome for avatars --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"><style>/* 样式 */body {font-family: Avenir, Helvetica, Arial, sans-serif;background-color: #f4f4f9;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;}.chat-container {display: flex;flex-direction: column;height: 80vh;width: 80vw;max-width: 600px;border: 1px solid #ccc;border-radius: 10px;overflow: hidden;background-color: #fff;}.chat-window {flex: 1;padding: 10px;overflow-y: auto;background-color: #f4f4f9;position: relative;}.chat-message {display: flex;margin-bottom: 10px;align-items: flex-start;}.message-left {flex-direction: row;}.message-right {flex-direction: row-reverse;}.avatar {width: 40px;height: 40px;border-radius: 50%;background-color: #007bff;display: flex;justify-content: center;align-items: center;color: white;font-weight: bold;margin: 0 10px;font-size: 20px;}.message-bubble {max-width: 70%;padding: 10px;border-radius: 20px;background-color: #007bff;color: white;word-wrap: break-word;}.message-left .message-bubble {background-color: #e4e6eb;color: black;}.chat-input {display: flex;padding: 10px;border-top: 1px solid #ccc;background-color: #fff;}.chat-input input {flex: 1;padding: 10px;border: 1px solid #ccc;border-radius: 20px;outline: none;}.chat-input button {margin-left: 10px;padding: 10px 20px;border: none;background-color: #007bff;color: white;border-radius: 20px;cursor: pointer;outline: none;}.chat-input button:hover {background-color: #0056b3;}.loading {position: relative;bottom: -20px;display: flex;align-items: center;justify-content: center;}/* Loader animation styles */.loader {position: relative;width: 2.5em;height: 2.5em;transform: rotate(165deg);}.loader:before, .loader:after {content: "";position: absolute;top: 50%;left: 50%;display: block;width: 0.5em;height: 0.5em;border-radius: 0.25em;transform: translate(-50%, -50%);}.loader:before {animation: before8 2s infinite;}.loader:after {animation: after6 2s infinite;}@keyframes before8 {0% {width: 0.5em;box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);}35% {width: 2.5em;box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);}70% {width: 0.5em;box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);}100% {box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);}}@keyframes after6 {0% {height: 0.5em;box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);}35% {height: 2.5em;box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);}70% {height: 0.5em;box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);}100% {box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);}}</style>
</head>
<body><div id="app"><div class="chat-container"><div class="chat-window"><div v-for="(message, index) in messages" :key="index" class="chat-message" :class="{'message-left': message.isUser, 'message-right': !message.isUser}"><div class="avatar"><i :class="message.isUser ? 'fas fa-user' : 'fas fa-robot'"></i></div><div class="message-bubble"><img :src="imageUrl" alt="" style="width: 400px;height: 400px;"></div></div><div class="loading" v-if="loading"><div style="display: flex; align-items: center; justify-content: center;"><div class="loader"></div><div style="margin-left: 10px; font-weight: bold; color: #e64c87;">加载中</div></div></div></div><div class="chat-input"><input v-model="userInput" @keydown.enter="sendMessage" placeholder="Type your question..." /><button @click="sendMessage">Send</button></div></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const { createApp } = Vue;createApp({data() {return {userInput: '我需要你给我画一只猫',messages: [],loading: false,jobId:"",imageUrl:""};},methods: {sendMessage() {if (this.userInput.trim()) {// 添加用户的消息this.messages.push({ text: this.userInput, isUser: true });// 模拟AI回复this.simulateAIResponse(this.userInput);// 清空输入框this.userInput = '';}},async simulateAIResponse(userText) {this.loading = true;try {const res = await axios.post("http://localhost:8888/createimage", {"prompt": this.userInput}, { headers: { "Content-Type": "multipart/form-data" } });if(res.data.code == 0){this.jobId = JSON.parse(res.data.data).data.jobId;const result = await axios.post("http://localhost:8888/fetch",{"jobId": this.jobId}, { headers: { "Content-Type": "multipart/form-data" } });if(result.data.code == 0){this.imageUrl = JSON.parse(result.data.data).data.discordImagethis.loading = false;}}} catch (error) {console.error("Error fetching AI response:", error);}},},}).mount('#app');</script>
</body>
</html>

申请API

https://ttapi.io/recharge

测试结果

这个主要对接了前一篇AI对话的博客,有需要自行去查找

参考博客地址:https://zhuanlan.zhihu.com/p/689296056

今日时间2024年8月29日,希望你天天开心,如有不会,请留言

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

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

相关文章

黑神话悟空 PC端配置需求详解:如何为不同游戏体验选择合适的配置?

《黑神话&#xff1a;悟空》是一款备受期待的动作角色扮演游戏&#xff0c;由游戏科学&#xff08;Game Science&#xff09;开发&#xff0c;基于《西游记》改编。随着游戏的发布&#xff0c;许多玩家都在关心一件事&#xff1a;我的电脑能带动这款游戏吗&#xff1f;本文将详…

centos7 xtrabackup mysql(8)压缩 全量备份 还原(4)

centos7 xtrabackup mysql&#xff08;8&#xff09;压缩 全量备份 还原&#xff08;4&#xff09; 查看版本&#xff1a; xtrabackup --version qpress --help 主机端 mysql -u root -p 1234aA~1 use company_pro; insert into employee(name) value (‘20240823_1401’);…

MT3608L 2.5A,高效率1.2MHz电流模式升压转换器芯片IC

一般描述 MT3608L是一款恒频、6针SOT23电流模式升压转换器&#xff0c;适用于小型、低功率应用。MT3608L开关频率为1.2 MHz&#xff0c;允许使用高度小于2mm的微型、低成本电容器和电感器。内部软启动可产生小浪涌电流&#xff0c;延长电池寿命。 MT3608L具有在…

JavaWeb JavaScript ⑥ 事件

你摸黑偷偷赶得路&#xff0c;都会变成意外来袭时你少受的苦 —— 24.8.29 一、什么是事件 HTML 事件可以是浏览器行为&#xff0c;也可以是用户行为。 当一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生&#xff0c;JS的事 件驱动指的就是行为触发代码运行…

ComfyUI SDXL Prompt Styler 简介

SDXL Prompt Styler 来自于 comfyui-art-venture 节点 style 已经更新 旧版本的 sai-line art 变更为 line art log_prompt 已经更新 旧版本的 false 变更为 Yes 或 No style_name 已经更新 旧版本的 true &#xff08;不再适用&#xff09;&#xff08;可以尝试对应style中…

【IoT】将各类遥控器(红外,频射,蓝牙,wifi,Zigbee)等设备接入米家,实现家庭物联网设备控制(以极米Z7X投影仪为例)

【IoT】将各类遥控器&#xff08;红外&#xff0c;频射&#xff0c;蓝牙&#xff0c;wifi&#xff0c;加密&#xff09;等设备接入米家&#xff0c;实现家庭物联网设备控制&#xff08;以极米Z7X投影仪为例&#xff09; 文章目录 1、三种主流遥控方式&#xff08;红外&#xff…

看新闻知补贴不用专门薅羊毛!让工作变舒服的5个黄金法则——早读(逆天打工人爬取热门微信文章解读)

你们都不看新闻吗&#xff1f; 引言Python 代码第一篇 洞见 让工作变舒服的5个黄金法则第二篇 故事之散户结尾 (发了3000亿以旧换新补贴&#xff0c;大家没有感觉到力度吗&#xff1f; 时间到今年年底&#xff0c;9月-12月是消费区&#xff0c;中间夹杂个双十一&#xff0c;现在…

一文搞懂 js 原型和原型链

文章目录 一、前言二、原型2.1 概念2.2 获取原型的方法2.2.1 __proto__获取方式2.2.2 通过构造函数prototype 属性获取2.2.2 ES6 class 通过Object.getPrototypeOf()获取类原型 2.3 通过原型实现继承2.4 原型的作用 三、 原型链四、ES6实现继承五、综述 一、前言 原型和原型链…

深入学习SQL优化的第五天(最后一天)

子查询 1321 餐 馆 营 业 额 变 化 增 长 1321. 餐馆营业额变化增长 表: Customer------------------------ | Column Name | Type | ------------------------ | customer_id | int | | name | varchar | | visited_on | date | | amount …

Linux网口指令

一 查看配置 ifconfig 二 修改IP sudo ifconfig ens33 192.168.150.100 netmask 255.255.255.0

kafka的12个重要概念

kafka的12个重要概念 1、服务器broker1.1、Broker 的主要功能1.2、Kafka Broker 的架构1.3、配置和管理1.4、高可用性和负载均衡1.5、总结 2、主题topic2.1、主要特点 3、事件Event4、生产者producer4.1、主要功能4.2、Producer 的配置选项4.3、Producer 的工作流程4.4、总结 5…

如何在不增加太多时间和精力的情况下,提高OZON电商店铺的运营效果

以下是一些在不增加过多时间精力的情况下提高 OZON 电商店铺运营效果的要点&#xff1a; 一、优化产品信息 • 关键词优化&#xff1a;利用 15-30 分钟时间&#xff0c;每周进行一次关键词研究&#xff0c;找到与产品相关且搜索量大的关键词&#xff0c;将其巧妙地融入到产品标…

3、LVGL控件-开关、复选框、进度条

本篇文章目录导航 ♠♠ LVGL控件-开关、复选框、进度条 ♣♣♣♣ 一、LVGL开关部件 ♦♦♦♦♦♦♦♦ 1.1 开关部件组成部分 ♦♦♦♦♦♦♦♦ 1.2 开关部件基本API ♦♦♦♦♦♦♦♦ 1.3 实验小演示 ♣♣♣♣ 二、LVGL复选框部件 ♦♦♦♦♦♦♦♦ 2.1 复选框部件组成部分 ♦…

立体库技术协议:完整版

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载。 这份文件是一份关于自动化立体库技术协议的详细文档&#xff0c;包括了总体设计方案、…

C语言中的运算符

一,算数运算符 基本算术运算符&#xff1a; 加法&#xff08;&#xff09;&#xff1a;用于两个数相加。例如 int a 3 5;&#xff0c;结果 a 的值为 8。 减法&#xff08;-&#xff09;&#xff1a;两个数相减。如 int b 7 - 4;&#xff0c;b 的值为 3。 乘法&#xff08;*…

【动图效果概览】自动化建链后,Exata调用STK更新卫星位置

如下图所示&#xff0c;动画遵循 时间前进方向&#xff0c;划分截取为5段 &#xff08;因为每张照片限制大小5MB&#xff0c;不够应该够看清个大概意思了&#xff09;&#xff1a;

黑神话悟空用什么编程语言

《黑神话&#xff1a;悟空》作为一款备受瞩目的国产单机动作游戏&#xff0c;其背后的开发涉及了多种编程语言和技术。根据公开信息和游戏开发行业的普遍做法&#xff0c;可以推测该游戏主要使用了以下几种编程语言&#xff1a; C&#xff1a; 核心编程语言&#xff1a;作为《黑…

【计算机网络】计算机网络的分层结构

为什么要分层&#xff1f;为什么要制定协议&#xff1f; 计算机网络功能复杂→采用分层结构&#xff0c;将诸多功能合理地划分在不同层次→对等层之间制定协议&#xff0c;以实现功能。

LabVIEW性能优化方法

在LabVIEW开发中&#xff0c;性能优化至关重要。合理的内存管理、并行处理、多线程优化、以及界面和代码的精简能够大幅提高程序效率&#xff0c;降低系统资源占用。下面将探讨LabVIEW性能优化的各个方面&#xff0c;提供实用技巧和建议&#xff0c;帮助开发者提升项目的执行速…

Node.js原生开发脚手架工具(下)

前言 在现代软件开发中&#xff0c;脚手架工具成为提高开发效率和一致性的关键利器。使用Node.js原生开发自己的脚手架工具不仅能帮助自动化常见任务&#xff0c;还能根据具体需求进行高度定制。Node.js的异步非阻塞特性和丰富的模块系统使其成为构建这种工具的理想选择。本篇文…