AI原生前端开发（013）：端侧文本生成实战：智能提示、自动补全

前言

这一篇我们来做有趣的实战：用端侧AI做智能文本输入！

---

1. 智能输入提示

import React, { useState, useRef, useEffect } from 'react';

function SmartInput() {
  const [text, setText] = useState('');
  const [suggestion, setSuggestion] = useState('');
  const [loading, setLoading] = useState(false);
  const sessionRef = useRef(null);

  useEffect(() => {
    initAI();
  }, []);

  async function initAI() {
    if ('ai' in window) {
      sessionRef.current = await window.ai.assistant.create({
        systemPrompt: `你是一个文本补全助手。
用户输入一段文字，帮他续写接下来可能的内容。
只返回续写的部分，不要重复原文。
简洁、自然。`
      });
    }
  }

  async function getSuggestion(currentText) {
    if (!sessionRef.current || !currentText.trim()) {
      setSuggestion('');
      return;
    }

    // 只在输入停顿后请求
    setLoading(true);
    
    try {
      const prompt = `请续写下面的文字，只返回续写部分：\n\n${currentText}`;
      const result = await sessionRef.current.prompt(prompt);
      setSuggestion(result.slice(0, 100)); // 限制长度
    } catch (error) {
      setSuggestion('');
    } finally {
      setLoading(false);
    }
  }

  function acceptSuggestion() {
    if (suggestion) {
      setText(prev => prev + suggestion);
      setSuggestion('');
    }
  }

  // 防抖
  let debounceTimer;
  const handleChange = (e) => {
    const newText = e.target.value;
    setText(newText);
    
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      getSuggestion(newText);
    }, 500);
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">⌨️ 智能输入提示</h1>
      
      <div className="relative">
        <textarea
          value={text}
          onChange={handleChange}
          onKeyDown={(e) => {
            if (e.key === 'Tab' && suggestion) {
              e.preventDefault();
              acceptSuggestion();
            }
          }}
          placeholder="在这里输入，AI会帮你续写...（按Tab接受建议）"
          className="w-full h-64 p-4 border rounded-lg"
        />
        
        {/* 建议提示 */}
        {suggestion && (
          <div className="absolute bottom-4 left-4 right-4 bg-blue-50 p-3 rounded-lg border border-blue-200">
            <span className="text-gray-500">建议：</span>
            <span className="text-blue-600">{suggestion}</span>
            <button 
              onClick={acceptSuggestion}
              className="ml-3 px-2 py-1 bg-blue-600 text-white text-sm rounded"
            >
              按Tab接受
            </button>
          </div>
        )}
        
        {loading && (
          <div className="absolute bottom-4 right-4 text-gray-500">
            思考中...
          </div>
        )}
      </div>
    </div>
  );
}

export default SmartInput;

---

2. 多种文本生成工具

import React, { useState, useRef } from 'react';

function TextGenerationTools() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');
  const [loading, setLoading] = useState(false);
  const sessionRef = useRef(null);

  const tools = [
    { id: 'paraphrase', label: '改写', prompt: '请用不同的方式表达这句话：' },
    { id: 'formal', label: '正式化', prompt: '请把这句话改得更正式：' },
    { id: 'casual', label: '口语化', prompt: '请把这句话改得更口语化：' },
    { id: 'emoji', label: '添加emoji', prompt: '给这句话添加合适的emoji：' },
    { id: 'expand', label: '扩写', prompt: '请扩写这句话，让它更详细：' },
    { id: 'shorten', label: '缩写', prompt: '请缩写这句话，保留核心意思：' }
  ];

  async function processText(tool) {
    if (!sessionRef.current) {
      sessionRef.current = await window.ai.assistant.create({
        systemPrompt: '你是一个文本处理助手。直接返回处理结果，不要多余解释。'
      });
    }
    
    setLoading(true);
    try {
      const prompt = `${tool.prompt}\n\n${input}`;
      const result = await sessionRef.current.prompt(prompt);
      setOutput(result);
    } catch (error) {
      setOutput('错误：' + error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">🛠️ AI文本工具</h1>
      
      <div className="grid md:grid-cols-2 gap-6">
        <div>
          <label className="block mb-2 font-medium">输入文本</label>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            className="w-full h-48 p-4 border rounded-lg"
            placeholder="在这里输入要处理的文本..."
          />
          
          <div className="grid grid-cols-3 gap-2 mt-4">
            {tools.map(tool => (
              <button
                key={tool.id}
                onClick={() => processText(tool)}
                disabled={loading}
                className="px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50"
              >
                {tool.label}
              </button>
            ))}
          </div>
        </div>
        
        <div>
          <label className="block mb-2 font-medium">处理结果</label>
          <div className="w-full h-48 p-4 border rounded-lg bg-gray-50">
            {loading ? '处理中...' : output}
          </div>
        </div>
      </div>
    </div>
  );
}

export default TextGenerationTools;

---

3. 今日小结

这一篇我们学习了：

1. 智能输入提示（Tab补全）
2. 多种文本生成工具（改写、正式化、口语化等）

下一篇，我们学习端侧图像理解！