高通AI推理套件可直接通过网页JavaScript调用，便于开发者创建并理解AI推理在Web解决方案中的运作原理。
高通技术公司与Cirrascale公司合作推出了一项免费试用的AI推理服务；通过该服务，开发者可以通过代码轻松连接并运行各种推理工作负载。在我们的上一篇博客中，我们介绍了如何通过Python SDK快速上手情感分析场景的示例。本文则将展示如何直接通过JavaScript在网页端调用REST API。
示例场景
在本示例中，我们将借助AI生成具有“创意性”的内容 – 俳句。俳句创作形式简单，通常遵循3-5-3的音节格式。在日语中，这种格式并不难实现，因为许多单词都具有可以预测的规律性音节模式。而对于其他语言，我们只需尽量接近这种音节模式。
俳句最初是日本的一种文人雅戏，众人围绕选定主题即兴创作。日本著名诗人松尾芭蕉（1644-1694），被公认为俳句艺术的集大成者。其作品多以自然风物为主题，奠定了传统俳句的审美范式。如今在AI技术的赋能下，这一古老艺术形式焕发新生——只需输入任意主题，即可获得既富创意又蕴含哲思的现代俳句。
步骤
- 为用户界面创建一个简单的网页
- 设置密钥和终端点
- 根据用户输入构建您的提示词
- 设置您的API请求
- 调用聊天函数API
- 清理结果
- 在网页中显示俳句
详细步骤说明
为用户界面创建一个简单的网页
为直观展示其易用性，我们将直接使用HTML（超文本标记语言），无需React、Vue、Angular等第三方JavaScript框架。该应用的用户界面设计极为简洁，一个显示俳句的区域，以及一个用于用户API密钥的键槽。通过原生JavaScript的onchange事件监听器实时存储用户输入变量。数据准备就绪后，我们直接将其插入到<div id= " haiku " ></div>中。
设置密钥和端点
首先，我们保存API端点和以及API密钥的占位符变量。
let API_ENDPOINT = "https://aisuite.cirrascale.com/apis/v2/completions";
let API_KEY = "";根据用户输入构建您的提示词
在使用大语言模型(LLM)时，精心设计提示词 (prompt) 至关重要——必须确保模型仅返回所需内容。若提示词不够精确，输出结果往往会包含大量冗余信息。在本用例中，我们需要利用一组指导原则来构建提示词，以便系统使用，同时在理想情况下仅返回俳句的文本。
let SYSTEM_ROLE = "You are a historical Japanese figure who is an expert at crafting haiku. ";
let USER_ROLE = "Please write a haiku about: ";
let GUARDRAILS = ". Respect the 5-7-5 syllable rule. Respond only with the haiku and no other text.";
AI生成俳句示例
稍后，我们将这些俳句与用户的灵感连接起来，以构建我们提交给推理服务的提示词。
设置您的API请求
由于无法预知API请求的响应时间，我们将采用异步函数进行服务调用，以避免界面卡顿影响用户操作。特别设计了错误处理机制：当检测到用户未输入API密钥时，系统将自动触发预置的提示函数，通过可视化方式即时提醒用户。
async function getNewHaiku(inspiration) {
let url = API_ENDPOINT;
// check for presence of API_KEY
if (API_KEY == "") {
updateDivContent('haiku', 'Sorry, no poetry without an API key!');
return;
}接下来，我们使用内置的JavaScript脚本语言函数fetch为API调用设置选项，以获得响应。根据API文档要求，我们需要将其作为POST调用，并将密钥放入header中。body部分将以JSON格式包含以下内容:我们的提示词、所选的大语言模型(LLM)、是否启用流式响应的标志位，以及最终需要生成的token数量。
俳句非常短，所以我们选择仅返回32个词元，从而确保获得非常快速的响应。
let options = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + API_KEY
},
body: JSON.stringify({
prompt: SYSTEM_ROLE + USER_ROLE + inspiration + GUARDRAILS,
model: "Llama-3.1-8B",
stream: false,
max_tokens: 32
}),
};调用聊天函数API
现在我们已经准备好进行API调用。我们遵循良好的做法，并确保用户知道服务器是否没有响应。
// Retrieve an answer
let response = await fetch(url, options);
let responseOK = response && response.ok;
let data ="";
if (responseOK) {
data = await response.json();
} else {
data = "no server response!";
};清理结果
在测试过程中，我们发现大语言模型(LLM)有时会在响应末尾返回额外数据，或者在输出中的换行格式也不统一。为确保最终呈现的是格式规范的俳句，我们通过正则表达式和字符串检查对输出结果进行了清理。然可能存在更优雅的解决方案，但当前方法确实行之有效。
let str = data.choices[0].text;
let regex = /-+/;
str = str.split(regex)[0];
regex = /—+/;
str = str.split(regex)[0];
regex = /(?=[A-Z])(?![a-z])/;
let verses = str.split(regex);
if (verses.length < 5 ) { verses.push(''); }
for (let i = 0; i < verses.length; i++) {
if (typeof verses[i] === undefined ) {
verses[i] = '';
}
}
str = verses[0]+verses[1]+verses[2]+verses[3];
在网页中显示俳句
至此，我们已完成该场景的最后一步。调用辅助函数将生成的俳句更新至页面，让用户尽情欣赏他们专属的定制诗作！
updateDivContent("haiku", str);如果您有兴趣了解单个HTML页面中的所有代码，请点击查看GitHub repo。
其他注意事项
在该示例中，我们采用了硬编码方式预设了API终端点和LLM模型选择。实际上，我们可以进一步扩展该示例，通过动态获取所有可用的大语言模型列表，让用户自行选择所需模型。
为避免硬编码API密钥，我们允许用户自行输入。若要将此构想开发成正式应用，则需确保所有敏感信息都得到妥善加密存储。
作为基于预定义的提示模板创建应用程序的一个有用模式，可以创建一个简单的微服务，作为单一用途的API。这里的JavaScript脚本语言代码可以在Node.js的容器中运行，以实现这一目标。当然，开发者也可选用其他编程语言实现；在下一篇博客文章中，我们将探讨创建一个微服务端点，由其在后台调用高通AI推理套件。
亲自尝试一下
在高通AI推理套件这样的可扩展平台上使用推理的过程与其他简单API的使用一样简洁明了。快为您自己的互联网项目进行尝试吧！
是否喜欢您所了解到的内容？请加入我们的开发者Discord社区，与其他开发者建立联系，获得最新消息和及时的技术支持。
在所发布内容中表达的观点仅为原作者的个人观点，并不代表高通技术公司或其子公司（以下简称为“高通技术公司”）的观点。所提供的内容仅供参考之用，而并不意味着高通技术公司或任何其他方的赞同或表述。本网站同样可以提供非高通技术公司网站和资源的链接或参考。高通技术公司对于可能通过本网站引用、访问、或链接的任何非高通技术公司网站或第三方资源并没有做出任何类型的任何声明、保证、或其他承诺。
高通品牌产品均为高通技术公司和/或其子公司的产品。
关于作者
雷·斯蒂芬森，云开发者关系主管
