发布为公开的web站点

在应用监测页中，你可以找到 WebApp 的管理卡片。打开访问开关后，你可以得到一个能够在 互联网上公开分享的网址。

以“翻译助手”为例，可以在workflow页面找到该发布应用的web站点，其他互联网用户都可以 访问该网站来使用对应的应用。

 嵌入网站

Dify 支持将你的 AI 应用嵌入到业务网站中，如下：

这里以“翻译插件”为例演示三种方式使用：

   iframe方式

通过<iframe>可以在一个网页中嵌入另一个网页，显示来自不同源的内容，例如视频、地图或应 用程序。

创建“翻译机器人1.html”，将Dify中提供的“iframe”内容嵌入网站，html内容如下：

<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻译插件</title>
<style>
/* 设置页面基本样式 */
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center; }
/* 设置标题样式 */
h1 {
margin-bottom: 20px; }
/* 设置聊天机器人容器样式 */
.chatbot-container {
width: 100%;
height: 700px;
margin: 0 auto;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<h1>欢迎使用翻译插件</h1>
<!-- 聊天机器人容器 -- >
<div class="chatbot-container"> <iframe
src="http://localhost/chatbot/5ZbcZpyDQEPq3WBy"
style="width: 100%; height: 100%; min-height: 700px"
frameborder="0"


allow="microphone"> </iframe>
</div> </body> </html>

双击打开“翻译机器人1.html”使用如下：

   script标签方式

<script>代码片段与使用<iframe>标签不同，使用<script>标签可以将聊天机器人直接集成到 网页中，通常用于实现浮动聊天按钮或嵌入式聊天窗口。

创建“翻译机器人2.html”，将Dify中提供的“script”内容嵌入网站，html内容如下：

<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻译插件</title>
<style>
/* 设置页面基本样式 */
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
text-align: center; }
/* 设置标题样式 */


margin-bottom: 20px; }
/* 设置聊天机器人容器样式 */
.chatbot-container {
width: 100%;
height: 700px;
margin: 0 auto;
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden; }
/* 设置浮动聊天按钮样式 */
#dify-chatbot-bubble-button {
background-color: #1C64F2 !important; }
#dify-chatbot-bubble-window {
width: 24rem !important;
height: 40rem !important;
}
</style>
</head>
<body>
<h1>欢迎使用翻译插件</h1>
<!-- 使用 iframe 嵌入聊天机器人 -- > <div class="chatbot-container">
<iframe
src="http://localhost/chatbot/5ZbcZpyDQEPq3WBy"   style="width: 100%; height: 100%; min-height: 700px" frameborder="0"
allow="microphone"> </iframe>
</div>
<!-- 使用 script 嵌入聊天机器人 -- > <script>
window.difyChatbotConfig = {
token: '5ZbcZpyDQEPq3WBy',
baseUrl: 'http://localhost' };
</script> <script
src="http://localhost/embed.min.js"
id="5ZbcZpyDQEPq3WBy"
defer>
</script>
</body>


</html>

Chrome浏览器扩展

点击安装浏览器扩展插件：

第5步骤中写入chat bot url，重启浏览器后就可以使用插件。特别注意：需要打开的网页中要访

问某个网站，不能是空白页，否则悬浮插件不显示。

基于API开发

Dify 基于“后端即服务”理念为所有应用提供了 API，为 AI 应用开发者带来了诸多便利。通过  这一理念，开发者可以直接在前端应用中获取大型语言模型的强大能力，而无需关注复杂的后端 架构和部署过程。

选择一个应用，在应用（Apps）左侧导航中可以找到访问 API（API Access）。在该页面中你可 以查看 Dify 提供的 API 文档，并管理可访问 API 的凭据。如下以“翻译助手”为例，使用API方 式来使用创建好的AI应用。

1) 创建API密钥及查看相关API相关文档

在 Dify 平台中，每个 AI 应用都会生成一个唯一的 API 密钥（API Key）。当在代码中使用特定 的 API 密钥进行请求时，Dify 会根据该密钥将请求路由到对应的 AI 应用。创建API密钥方式如  下：

2) Java 代码方式使用“翻译助手”

import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.json.JSONObject;
import java.nio.charset.StandardCharsets;
import java.util.Scanner;  public class DifyApiTest {
// Dify API 密钥和端点
private static final String API_KEY = "app-m7zVrLoIG9MVQRI0upw1TOIC"; // 替换为您的 Dify API 密钥


private static final String API_URL = "http://localhost/v1/chat-messages"; // 替换为实际的 Dify API 端点
public static void main(String[] args) { try {
// 调用 Dify API
callDifyApi();
} catch (Exception e) {
e.printStackTrace(); }
}
public static void callDifyApi() throws Exception { // 创建 HTTP 客户端
try (CloseableHttpClient httpClient = HttpClients.createDefault()) { // 创建 POST 请求
HttpPost httpPost = new HttpPost(API_URL);
// 设置请求头
httpPost.setHeader("Content-Type", "application/json; charset=UTF-8");
httpPost.setHeader("Authorization", "Bearer " + API_KEY);
// 构建请求体
JSONObject requestBody = new JSONObject();
requestBody.put("inputs", new JSONObject()); // 允许传入 App 定义的各变量值
requestBody.put("query", "今天天气很好，适合游玩"); // 用户输入/提问内容
requestBody.put("response_mode", "streaming"); // 响应模式: streaming 流式模式（推荐）; blockin requestBody.put("conversation_id", ""); // 会话 ID（可选），需要基于之前的聊天记录继续对话，必须 requestBody.put("user", "abc-123"); // 用户标识（可选），用户标识，用于定义终端用户的身份，方便
// 添加文件信息
/*JSONObject file = new JSONObject();
file.put("type", "image");//支持的文件类型
file.put("transfer_method", "remote_url"); //传递方式： remote_url: 图片地址 ; local_file: 上传文件 file.put("url", "your_img_url"); //图片地址
requestBody.put("files", new JSONObject[]{file});*/
// 设置请求体
StringEntity entity = new StringEntity(requestBody.toString(), StandardCharsets.UTF_8);
httpPost.setEntity(entity);
// 执行请求并获取响应
try (CloseableHttpResponse response = httpClient.execute(httpPost)) {
HttpEntity responseEntity = response.getEntity();
// 解析响应
//String responseString = EntityUtils.toString(responseEntity);
//System.out.println("API 返回内容: " + responseString);


if (response.getStatusLine().getStatusCode() == 200 && responseEntity != null) {


// 获取响应内容输入流
try (Scanner scanner = new Scanner(responseEntity.getContent(), StandardCharsets.UTF_8.na // 逐行读取响应内容
while (scanner.hasNextLine()) {
String line = scanner.nextLine();
// 检查行是否以 "data: " 开头
if (line.startsWith("data: ")) {
// 提取 JSON 部分
String jsonPart = line.substring(6).trim();
// 解析 JSON
JSONObject jsonObject = new JSONObject(jsonPart);
// 检查事件类型是否为 "message"
if ("message".equals(jsonObject.optString("event"))) {
// 提取并输出 answer 字段内容
String answer = jsonObject.optString("answer");
System.out.print(answer); //不换行输出所有内容
}
}
}
}
} else {
throw new RuntimeException("API 请求失败，错误 code: "
+ response.getStatusLine().getStatusCode());
}
}
}
}
}

运行代码输出结果如下：

<think>
嗯，用户让我翻译“今天天气很好，适合游玩”成英文，而且不需要太多解释。首先，我得确认这句话的意思，确 </think>Today is fine, suitable for outdoor activities.

# 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

大模型-模型融合

avatar 2048 AI社区

【Epiq Solutions】Matchstiq™ X40 产品。AI SDR

Matchstiq™ X40 是 Epiq Solutions 打造的一款高性能、低 SWaP（体积、重量、功耗）软件定义无线电（SDR）平台，专为紧凑型应用（如无人系统有效载荷 UxS）中的 AI/ML 边缘运算设计。它融合了强大 RF 前端、高速数据桥、GPU/CPU 与 FPGA，实现一体化的信号采集与处理能力。

avatar 2048 AI社区
cover

具身人工智能：策略动作的风险与机遇

avatar 2048 AI社区