AI 助力前端开发: 利用 Azure-Open-AI 与 Langchain 优化 JSON 数据

前言

本案例用到了 Azure 服务和 Langchain 库，使用 Python 编写代码片段。但都可以改写成 Node 代码，因为 Azure 服务是通过网络请求调用，Langchain 也提供了 Node 版本。

作为一名精力有限的前端开发，我也是初次接触 Python 语言，很好上手，且本案例涉及的语法很简单，和 js 差不多。所以阅读时不必有心智负担，只要会用 js 写 hello world，就能看懂。

需求

我们输入如下 JSON 数据：

{
    "media": {
          "src": "https://picsum.photos/400/400"
    },
    "text": "连接未来，驾驶智能"
}

需要输出这样的 JSON 数据：

{
    "media": {
          "src": "https://4.bp.blogspot.com/-WJLOEkpLanQ/WeWMyLABAkI/AAAAAAAAKxk/q33QdFQuKrsSr7nkj_M1F-uGmM-GAq4tgCLcBGAs/s1600/15042573663886%255B1%255D.jpg"
    },
    "text": "连接未来，驾驶智能"
}

隐藏需求：获取一张符合 text 字段（也许是其他字段）描述的网络图片，并将图片 url 替换 src 的值。但前提是，你不知道这个json中有什么字段和数据，整个过程需要利用 AI 来推理得出隐藏需求

下面，让我们看看如何通过 AI 实现这个功能。

方案

我们只需要写一份 prompt，其他都交由 AI 处理

1. 利用 AI 进行 JSON 分析，找出目标字段，如：desc。
2. 利用图片搜索工具，搜索出符合目标字段描述的网络图片。
3. 利用 AI 进行 JSON 分析，找出目标字段，如：src，并将搜索结果替换目标字段的值。

实施

根据分享视频，我了解到使用的技术 OpenAI 和 Langchain。但我手头上的 OpenAI Key 已经过期了，所以又注册了一个 Azure 账号，来申请免费的 Azure-Open-AI，可以通过调用 REST API 来接入 OpenAI，此外 Azure 还提供了Bing Search 搜索图片的功能；而 Langchain 则可以帮助我们自定义 Agent 和 LLM，以便实现更加精确的搜索结果。

Langchain 可以让你的 OpenAI 实现联网功能，请接着往下看

集成 Azure-Open-AI

Azure OpenAI 服务提供对 OpenAI 强大语言模型的 REST API 访问

要集成 Azure-Open-AI，我们需要首先注册一个 Azure 账户，并获取API密钥（这里就不介绍怎么注册账号了）。然后，我们可以使用 Python 的 requests 库来调用 Azure-Open-AI 的 REST API。可以参考这里 Azure OpenAI 服务 REST API 参考。文档还是很齐全，直接 ctrl+c 再 ctrl + v，这样我们就可以接入大模型了

def request(prompt, max_tokens=1000):
    url = "https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}/chat/completions?api-version={api-version}"  
    headers = {  
        "api-key": {your-api-key},  
        "Content-Type": "application/json",  
    }  
    data = {  
        "messages": [  
            {"role": "user", "content": prompt}  
        ],  
        "max_tokens": max_tokens,  
        "temperature": 0,  
    }  

    # 发起网络请求，调用 Azure OpenAI 服务
    response = requests.post(url, headers=headers, json=data)  

    # 对返回结果进行逻辑处理
    if response.status_code == 200:  
        res = response.json()  
        text = res['choices'][0]['message']['content']  

        return text  
    else:    
        print(f"请求失败，状态码：{response.status_code}")  
        return ''

集成 Bing Search Image

对于网络图片的搜索，可以参考图像搜索 API v7，这个也是 Azure 的服务，在操作上一步时，可以一块申请好

def search_images(query: str) -> str:  
    # 构建请求 URL  
    headers = {"Ocp-Apim-Subscription-Key": {your-key}}
    
    # 构造请求参数
    # license 字段是用来约束图片的版权，ShareCommercially 代表可商用
    # query 搜索的内容
    params = {"q": query, "count": 2, "license": "ShareCommercially"}
    
    # 发起网络请求，调用 Azure OpenAI 服务
    response = requests.get("https://api.bing.microsoft.com/v7.0/images/search", headers=headers, params=params)  

    # 检查响应是否成功  
    if response.status_code == 200:  
        result = response.json()  
        web_search_urls = [item["contentUrl"] for item in result["value"]]  

        return web_search_urls[0]  
    else:  
        return ''

集成 Langchain

Langchain 是一个基于 Python 的开源库，它允许我们自定义 Agent 和 LLM。要集成 Langchain，我们可以直接参考 官方文档 中的示例代码，其中 CustomPromptTemplate、CustomOutputParser 的代码可以直接照搬。然而，在实现 CustomTool 和 CustomLLM 的过程中，我们遇到了一些问题。接下来，我将分享遇到的问题及其解决方案。

自定义LLM的关键问题

在实现自定义LLM时，我遇到了一个关键问题：需要设置stop参数，以便在满足条件时停止搜索。Langchain 是提供了内置的 LLM，当时不包含本文提到的 Azure-Open-AI 的 REST API 方式实现的大模型。所以我们需要自行实现接入

from typing import Any, List, Mapping, Optional  
from langchain.callbacks.manager import CallbackManagerForLLMRun  
from langchain.llms.base import LLM  
import request_ai  
from langchain.llms.utils import enforce_stop_tokens  
  
  
class CustomLLM(LLM):  
    history = []  

    def __init__(self):  
        super().__init__()  

    @property  
    def _llm_type(self) -> str:  
        return "custom_llm"  

    def _call(  
        self,  
        prompt: str,  
        stop: Optional[List[str]] = None,  
        run_manager: Optional[CallbackManagerForLLMRun] = None,  
        **kwargs: Any,  
    ) -> str:
        # 这里调用的是「集成 Azure-Open-AI」中的 request 方法
        result = request_ai.request(prompt)
        
        # 一定要加上这段，不然在解析的时候，AI 不知道在哪停止搜索
        if stop is not None:  
            result = enforce_stop_tokens(result, stop)  
        self.history = self.history + [[None, result]]  
        return result  

    @property  
    def _identifying_params(self) -> Mapping[str, Any]:  
        return {}

自定义 Tool 的关键问题

此外，在自定义 Tool 时，不能设置 return_direct=true，因为这会导致流程中断（其实这个参数默认就是 false，大家不要手动加）

tools = [  
    Tool(  
        name="image_search",
        # 这里调用的是「集成 Bing Search Image」中的 search_images 方法
        func=azure_image_search.search_images,  
        description="useful when you need to search for an image. provide some keywords, and it will return 2 http urls of pictures",
        # 这个参数也可以省略
        return_direct=false
    ),  
]

这里也分享一下 prompt 模板的内容

"""you will receive a json data, your job is modifing some fields of it, you should keep the original data struct, You have access to the following tools:  
  
{tools}  
  
Use the following format:  
  
Question: the input question you must answer  
Thought: you should always think about what to do  
Action: the action to take, should be one of [{tool_names}]  
Action Input: the input to the action  
Observation: the result of the action. skip this step if no available Action  
... (this Thought/Action/Action Input/Observation can repeat N times)  
Thought: I now know the final answer  
Final Answer: the final answer to the original input question  
  
Begin! remember, the final answer should be a json replace the original json data structure  
  
json data: ```{json_data}```  
user_input: {input}  
{agent_scratchpad}"""

运行结果

# 执行程序
agent_executor.run("根据内容选一张合适的图片")

下面的截图是程序运行过程的打印信息

// 结果
{
    "media": {
          "src": "https://4.bp.blogspot.com/-WJLOEkpLanQ/WeWMyLABAkI/AAAAAAAAKxk/q33QdFQuKrsSr7nkj_M1F-uGmM-GAq4tgCLcBGAs/s1600/15042573663886%255B1%255D.jpg"
    },
    "text": "连接未来，驾驶智能"
}

AI 自动处理过程大概分为三步：

• 第一步，根据用户输入的内容（根据内容选一张合适的图片），并通过调用 Azure-Open-AI 分析 Prompt（由 CustomPromptTemplate 生成），分析出整个程序要执行两个动作：利用 image_search 搜索合适的图片 以及 将 src 的值替换成一张合适图片的图片地址，返回新的 json。
• 第二步，通过本地的 image_search 工具搜索出合适的图片。
• 第三步，将第二步获取到的图片地址作为输入，将输入塞到初始的 JSON 数据中的 src 字段，并返回新的 JSON 字段。

上图可以看出 Bing Search Image 搜索出来的网络图片质量还是很高的，图文比较匹配

已经实现了 OpenAI 联网的功能

总结

通过集成 Azure-Open-AI 和 Langchain，我们成功实现了优化 JSON 数据的功能。在这个过程中，我确实感受到了一种新的开发模式，与 AI 紧密结合。希望能够对大家有所启发和帮助。