基于Chrome内置AI的Web开发
我们继续探索 Chrome 内置 AI，以了解和探索浏览器内置 AI 的不同用例。在之前的一篇文章中，我们探讨了如何开始使用它。
本文以及我正在使用 Chrome 内置 AI 进行的一些实验受到了 Steve Sanderson 的精彩演讲的启发，演讲题为“如何将真正有用的 AI 添加到你的网络应用”。感谢 Guillaume Laforge 提供的链接。你可以在此处查看演讲视频，我建议至少在前 15 分钟集中注意力。
1、更好地理解错误
我将演示该演讲的一小部分以及我们如何使用 Chrome 中的内置 AI 来实现这一点。由于没有更好的标题，我按照标题所暗示的方式命名，但要点如下：
- 假设你是产品/服务支持人员，必须查看错误报告列表并进行一些分析。
- 我们假设此处的错误报告系统是一个简单的网页，出于演示目的，我们将使用错误示例列表（全部是虚构的）。
- 我们将演示以下内容：显示可以总结错误的工具提示和可以建议错误替代标题的工具提示，而不是用户报告的标题。
2、但是为什么呢？
想想为什么你可能想要做我刚才说的事情以及它如何有所帮助。这在视频中得到了很好的解释，我将尝试简短地解释一下。
用户在报告错误时，从所有积极的意义上讲，都会向你提供正在发生的事情的详细信息。你希望 AI 为你做的事情之一是提高常规且耗时的任务的效率。如果我们可以为用户总结错误描述/详细信息，以便他们能够快速了解错误中发生的事情，而无需阅读整个内容。
我们指出的第二个方面是提供一个工具提示，显示不同但基于产品描述的标题摘要。这在上面链接的视频中得到了很好的解释，但请想一想。你想受到用户在提交错误时提供的标题的影响吗？这没有错，但它可能不准确，有趣的是，根据错误描述为错误创建替代标题可能会有很大价值。它可能只是为用户提供有关错误发生情况的更好线索。
3、让我们看看实际操作
首先看看它是如何工作的。我们在系统中报告了一个错误列表。我故意只保留了几个属性，以让我们专注于任务。这绝不是一个真正的错误报告系统。
此外，请记住，我在 Chrome Canary 中运行它。
在上面的截图中，我将鼠标悬停在第 4 条记录的“问题标题”上。根据问题描述，我得到了不同的标题。
同样，如果我将鼠标悬停在“问题描述”上，我会看到以下内容：
希望你能明白我的意思。这些标题/摘要是否准确、有用、更易于理解，这是我们可以讨论的问题，但请记住，我并没有真正将提示推到极限。唯一使用的提示分别是标题工具提示和描述工具提示：
`Generate a concise one-line title for this issue:\n\n${description}`翻译：为此问题生成一个简洁的单行标题：\n\n${description}
`Summarize this issue description:\n\n${description}`翻译：总结此问题描述：\n\n${description}
你可以更改提示，以你喜欢的格式或你喜欢的简洁性提供输出。
4、实现代码
<!DOCTYPE html>
<html>
<head>
<title>Issue Tracker</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #ccc;
background-color: yellow;
padding: 5px;
z-index: 10;
}
</style>
</head>
<body>
<h2>Issue Tracker</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Date Time</th>
<th>Reported by</th>
<th>Issue Title</th>
<th>Issue Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2024-11-04 10:00</td>
<td>test-user-1</td>
<td class="title-tooltip" data-tooltip-target="title-tooltip-1">Form not working</td>
<td class="desc-tooltip" data-tooltip-target="desc-tooltip-1">I am trying to submit a form on the website, but when I click the 'Submit' button, nothing happens. I have tried using different browsers, including Chrome, Firefox, and Safari, but the issue persists. I have also cleared my browser cache and cookies, but the problem remains. I am using the latest version of each browser. I have tried submitting the form with different data, but the issue persists. I have also tried submitting the form on different devices, but the issue persists. I am not sure what else to try.</td>
<td>New</td>
</tr>
<tr>
<td>2</td>
<td>2024-11-04 11:30</td>
<td>test-user-2</td>
<td class="title-tooltip" data-tooltip-target="title-tooltip-2">Site not appearing well on mobile</td>
<td class="desc-tooltip" data-tooltip-target="desc-tooltip-2">The website layout appears broken on mobile devices. When I access the website on my iPhone, the images overlap the text, making it difficult to read. The text is also too small and the buttons are not properly aligned. This makes the website unusable on mobile devices. I have tried using different browsers on my iPhone, but the issue persists. I have also tried rotating my phone, but the issue persists. I have also tried clearing my browser cache and cookies, but the issue persists.</td>
<td>New</td>
</tr>
<tr>
<td>3</td>
<td>2024-11-04 12:30</td>
<td>test-user-3</td>
<td class="title-tooltip" data-tooltip-target="title-tooltip-3">Login functionality is broken.</td>
<td class="desc-tooltip" data-tooltip-target="desc-tooltip-3">I am unable to log in to my account. I have tried entering my correct username and password, but I keep getting an 'Invalid username or password' error message. I have also tried resetting my password, but I am still unable to log in. I am concerned that my account may have been compromised. I have tried logging in from different devices, but the issue persists. I have also tried using different browsers, but the issue persists</td>
<td>New</td>
</tr>
<tr>
<td>4</td>
<td>2024-11-04 16:30</td>
<td>test-user-4</td>
<td class="title-tooltip" data-tooltip-target="title-tooltip-4">Site is slow</td>
<td class="desc-tooltip" data-tooltip-target="desc-tooltip-4">The website is taking an unusually long time to load. I have a fast internet connection, so I don't believe it is a network issue. The loading time is significantly slower than usual, making it frustrating to use the website. I have tried clearing my browser cache and cookies, but the problem persists. I have also tried using different browsers, but the issue persists. I have also tried restarting my computer, but the issue persists.</td>
<td>New</td>
</tr>
</tbody>
</table>
<div id="title-tooltip-1" class="tooltip"></div>
<div id="desc-tooltip-1" class="tooltip"></div>
<div id="title-tooltip-2" class="tooltip"></div>
<div id="desc-tooltip-2" class="tooltip"></div>
<div id="title-tooltip-3" class="tooltip"></div>
<div id="desc-tooltip-3" class="tooltip"></div>
<div id="title-tooltip-4" class="tooltip"></div>
<div id="desc-tooltip-4" class="tooltip"></div>
<script>
const titleTooltips = document.querySelectorAll('.title-tooltip');
const descTooltips = document.querySelectorAll('.desc-tooltip');
async function showTooltip(event, targetId, promptText) {
console.log("Invoking showTooltip function with {targetId: " + targetId + ", promptText: " + promptText + "}");
const tooltip = document.getElementById(targetId);
tooltip.style.display = 'block';
tooltip.style.left = event.pageX + 10 + 'px';
tooltip.style.top = event.pageY + 10 + 'px';
try {
console.log('Inside showTooltip function');
const session = await ai.languageModel.create();
console.log('Session created:');
const result = await session.prompt(promptText);
console.log(result);
tooltip.textContent = result;
} catch (error) {
console.error('Error:', error);
tooltip.textContent = 'An error occurred.';
}
}
titleTooltips.forEach(title => {
title.addEventListener('mouseover', async (event) => {
const targetId = title.dataset.tooltipTarget;
const description = title.nextElementSibling.textContent; // Get the description from the next cell
const promptText = `Generate a concise one-line title for this issue:\n\n${description}`;
showTooltip(event, targetId, promptText);
});
title.addEventListener('mouseout', () => {
const targetId = title.dataset.tooltipTarget;
document.getElementById(targetId).style.display = 'none';
});
});
descTooltips.forEach(desc => {
desc.addEventListener('mouseover', async (event) => {
const targetId = desc.dataset.tooltipTarget;
const description = desc.textContent;
const promptText = `Summarize this issue description:\n\n${description}`;
showTooltip(event, targetId, promptText);
});
desc.addEventListener('mouseout', () => {
const targetId = desc.dataset.tooltipTarget;
document.getElementById(targetId).style.display = 'none';
});
});
</script>
</body>
</html>我们可以跳过代码的 HTML / CSS 部分，因为我不太擅长它，并使用了 Code Assist 的大量帮助来帮助我生成它。
关键是传递提示的 showTooltip 函数。关键行是实验性 Prompt API 的使用。我们首先创建语言模型，然后在成功创建会话后对其进行提示。查看第 88 行及以后的完整代码：
const session = await ai.languageModel.create();
const result = await session.prompt(promptText);希望这能帮助你了解增强或向现有 Web 应用程序添加一些有用的 AI 是多么简单。为此，我们使用了 Chrome 内置 AI 功能，特别是 Prompt API 来实现结果。
原文链接：Using Chrome Built-in AI Nano models to add AI features to existing Web Applications
汇智网翻译整理，转载请标明出处