Flutter浏览器AI功能插件chrome_ai的使用

ChromeAI

最近，Chrome 浏览器新增了 window.ai 功能——内置了 Gemini Nano AI 模型，这意味着开发者可以在浏览器中直接使用设备上的 AI 而无需任何配置。

我相信这将真正改变网络应用。应用场景无穷无尽：智能自动补全、错误修正与验证、自然语言过滤、表单自动填充、UI 建议、初步摘要和搜索等。

因此，我开发了一个库来在 Flutter 中启用此功能。有了这个库，你也可以轻松地在 Flutter Web 中使用这一功能。

安装

你可以观看以下视频了解如何在 Chrome 中启用 AI 并运行此库。

1. 启用 AI 在 Chrome 中

Chrome 内置的 AI 是一个预览功能，你需要使用版本 127 或更高的 Chrome，现在可以在 开发版 或 Canary 版 中找到，可能在 2024 年 7 月 17 日发布到稳定版。

之后，你需要开启以下标志：

• <a>chrome://flags/#prompt-api-for-gemini-nano</a>: 启用
• <a>chrome://flags/#optimization-guide-on-device-model</a>: 启用 BypassPrefRequirement
• <a>chrome://components/</a>: 点击 Optimization Guide On Device Model 下载模型。

2. 添加库

flutter pub add chrome_ai

3. 运行你的项目

1. 打开终端并运行 Web 服务器

flutter run -d web-server

2. 打开 Chrome 开发版或 Canary 版，并在 http://localhost:port 中打开你的项目

使用

检查 Chrome AI 的可用性

import 'package:chrome_ai/chrome_ai.dart';

final availability = await ChromeAI.canCreateTextSession();
if(availability == AIModelAvailability.no){
    // 无法创建文本会话
}else if(availability == AIModelAvailability.afterDownload) {
    // 需要下载模型
}else if(availability == AIModelAvailability.readily){
    // 模型已准备好
}

生成文本

import 'package:chrome_ai/chrome_ai.dart';

final session = await ChromeAI.createTextSession();
var result = await session.prompt("为什么天空是蓝色的？");
print(result);  

生成流式文本

import 'package:chrome_ai/chrome_ai.dart';

final session = await ChromeAI.createTextSession();
final stream = session.promptStreaming("为什么天空是蓝色的？");

stream.listen((result) {
  print(result);
}).onError((e, stackTrace) {
  print(e.toString());
});

需要帮助！

该项目非常新。如果你有任何问题，请打开一个 issue。贡献非常欢迎。

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 chrome_ai 插件。

import 'package:chrome_ai/chrome_ai.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller =
      TextEditingController(text: "为什么天空是蓝色的？");
  String _displayText = "This space is filled with text.";
  String? _error;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: '输入一些文本',
              ),
            ),
            const SizedBox(height: 10),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () async {
                    final availability = await ChromeAI.canCreateTextSession();
                    if (availability == AIModelAvailability.no) {
                      // 无法创建文本会话
                    } else if (availability ==
                        AIModelAvailability.afterDownload) {
                      // 需要下载模型
                    } else if (availability == AIModelAvailability.readily) {
                      // 模型已准备好
                    }
                    setState(() {
                      _displayText = availability.toString();
                    });
                  },
                  child: const Text('是否可以创建文本会话？'),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () async {
                    final session = await ChromeAI.createTextSession();
                    var result = await session.prompt(_controller.text);

                    setState(() {
                      _displayText = result;
                    });
                  },
                  child: const Text('生成文本'),
                ),
                const SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () async {
                    final session = await ChromeAI.createTextSession();
                    final stream = session.promptStreaming(_controller.text);

                    stream.listen((result) {
                      setState(() {
                        _displayText = result;
                      });
                    }).onError((e, stackTrace) {
                      setState(() {
                        _error = e.toString();
                      });
                    });
                  },
                  child: const Text('流式生成文本'),
                ),
              ],
            ),
            const SizedBox(height: 20),
            if (_error != null)
              Text('错误: $_error', style: const TextStyle(color: Colors.red)),
            Expanded(
              child: SingleChildScrollView(
                child: Text(
                  _displayText,
                  style: Theme.of(context).textTheme.bodyLarge,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}