使用LLaMA 3.1、Firebase和Node.js，构建一个音控的智能厨房应用程序 原创

Shell
1 npm install @mui/material @emotion/react @emotion/styled firebase
1.
2.

JavaScript
1 import { initializeApp } from "firebase/app";
2 import { getAnalytics } from "firebase/analytics";
3 import { getAuth } from "firebase/auth";
4 import { getFirestore } from "firebase/firestore";
5 ​
6 const firebaseConfig = {
7 apiKey: "YOUR_API_KEY",
8 authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
9 projectId: "YOUR_PROJECT_ID",
10 storageBucket: "YOUR_PROJECT_ID.appspot.com",
11 messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
12 appId: "YOUR_APP_ID"
13 };
14
​15 const app = initializeApp(firebaseConfig);
16 const analytics = getAnalytics(app);
17 export const auth = getAuth(app);
18 export const db = getFirestore(app);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

TypeScript
1 import { NextRequest, NextResponse } from 'next/server';
2
​3 export async function POST(req: NextRequest) {
4  const { prompt } = await req.json();
5
​6  // Check if the API key is available
7  const apiKey = process.env.OPENROUTER_API_KEY;
8  if (!apiKey) {
9    console.error('API key not found');
10   return NextResponse.json({ error: "API key is missing" }, { status: 500 });
11  }
12
​13  const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
14    method: "POST",
15    headers: {
16      "Authorization": `Bearer ${apiKey}`,
17      "Content-Type": "application/json",
18    },
19    body: JSON.stringify({
20      model: "meta-llama/llama-3.1-8b-instruct",
21      messages: [
22        { role: "system", content: "You are an assistant that extracts information and outputs only valid JSON. Do not include any explanation or extra information. Only respond with a JSON object that has the following structure: {\"itemName\": \"string\", \"quantity\": \"number\"}." },
23        { role: "user", content: `Extract the item name and quantity from the following command: "${prompt}"` }
24      ],
25    })
26  });
27
​28  if (!response.ok) {
29    console.error('LLaMA API request failed with status:', response.status);
30    return NextResponse.json({ error: "Failed to process command with LLaMA" }, { status: 500 });
31  }
32​
33  const completion = await response.json();
34  const rawJson = completion.choices[0].message.content;
35  console.log('Raw response from LLaMA:', rawJson); // Detailed logging of the raw response
36
​37  // Extracting JSON from the response content
38  const startIndex = rawJson.indexOf('{');
39  const endIndex = rawJson.lastIndexOf('}') + 1;
40
​41  if (startIndex === -1 || endIndex === -1) {
42    console.error('Failed to find valid JSON in LLaMA response');
43    return NextResponse.json({ error: "Failed to extract JSON from LLaMA response" }, { status: 500 });
44  }
45
​46  const jsonString = rawJson.substring(startIndex, endIndex);
47  console.log('Extracted JSON string:', jsonString); // Logging extracted JSON string
48​
49  try {
50    const parsedData = JSON.parse(jsonString);
51    console.log('Parsed data:', parsedData); // Logging the parsed data
52​
53    const { itemName, quantity } = parsedData;
54​
55    if (!itemName || !quantity) {
56      console.error('Missing fields in parsed data:', parsedData);
57      return NextResponse.json({ error: "Invalid data received from LLaMA" }, { status: 500 });
58    }
59
​60    return NextResponse.json({ itemName, quantity });
61  } catch (error) {
62    console.error('Error parsing JSON from LLaMA response:', error);
63    return NextResponse.json({ error: "Failed to parse JSON from LLaMA response" }, { status: 500 });
64  }
65}
66
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.

TypeScript
1 import { NextRequest, NextResponse } from 'next/server';
2
​3 const systemPrompt = `
4 You are a helpful and friendly AI kitchen assistant. Your role is to assist users in their kitchen tasks, providing guidance, suggestions, and support in a clear and concise manner. Follow these guidelines:
5​
6 1. Provide friendly, helpful, and respectful responses to all user inquiries, ensuring a positive experience.
7 2. When asked for a recipe, suggest simple and delicious recipes based on the ingredients the user has available. Keep the instructions clear and easy to follow.
8 3. Assist with creating grocery lists by accurately adding items mentioned by the user. Confirm each addition and offer to help with more items.
9 4. Handle common kitchen-related tasks such as suggesting recipes, checking pantry items, offering cooking tips, and more.
10 5. If the user is unsure or needs help deciding, offer suggestions or ask clarifying questions to better assist them.
11 6. Recognize when the user is trying to end the conversation and respond politely, offering a warm closing message.
12 7. Avoid overly technical language or complex instructions. Keep it simple, friendly, and approachable.
13 8. Provide accurate and practical information, such as cooking times, ingredient substitutions, or food storage tips.
14 9. Tailor responses to the user's preferences and dietary restrictions whenever mentioned.
15 10. Ensure every interaction feels personal, supportive, and designed to help the user enjoy their cooking experience.
16​
17 Remember, your goal is to make cooking and kitchen tasks easier, more enjoyable, and stress-free for the user.
18 `;
19
​20 export async function POST(req: NextRequest) {
21   try {
22     const { command } = await req.json();
23     console.log('Received command:', command);
24
​25     const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
26      method: "POST",
27      headers: {
28        "Authorization": `Bearer ${process.env.OPENROUTER_API_KEY}`,
29        "Content-Type": "application/json",
30      },
31      body: JSON.stringify({
32        model: "meta-llama/llama-3.1-8b-instruct",
33        messages: [
34          { role: "system", content: systemPrompt },
35          { role: "user", content: command }
36        ],
37      })
38    });
39
​40    if (!response.ok) {
41      throw new Error(`Failed to fetch from OpenRouter AI: ${response.statusText}`);
42    }
43
​44    const completion = await response.json();
45    const responseMessage = completion.choices[0].message.content;
46    console.log('Received response:', responseMessage);
47​
48    return NextResponse.json({ response: responseMessage });
49  } catch (error) {
50    console.error("Error processing request:", error);
51    return NextResponse.json({ error: "Error processing request" }, { status: 500 });
52  }
53}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

TypeScript
1 import { NextRequest, NextResponse } from 'next/server';
2
​3 export async function POST(req: NextRequest) {
4   const { availableItems } = await req.json();
5
​6   // Check if the API key is available
7   const apiKey = process.env.OPENROUTER_API_KEY;
8   if (!apiKey) {
9     console.error('API key not found');
10    return NextResponse.json({ error: "API key is missing" }, { status: 500 });
11  }
12
​13   const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
14    method: "POST",
15    headers: {
16      "Authorization": `Bearer ${apiKey}`,
17      "Content-Type": "application/json",
18    },
19    body: JSON.stringify({
20      model: "meta-llama/llama-3.1-8b-instruct",
21      messages: [
22        { role: "system", content: "You are an assistant that provides specific recipe suggestions based on available ingredients. Only respond with a recipe or cooking instructions based on the provided ingredients." },
23        { role: "user", content: `Here are the ingredients I have: ${availableItems}. Can you suggest a recipe using these ingredients?` }
24      ],
25    })
26  });
27​
28  if (!response.ok) {
29    console.error('LLaMA API request failed with status:', response.status);
30    return NextResponse.json({ error: "Failed to process recipe request with LLaMA" }, { status: 500 });
31  }
32
​33  const completion = await response.json();
34  const recipe = completion.choices[0].message.content.trim();
35
​36  return NextResponse.json({ recipe });
37 }
38
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

TypeScript
1 "use client";
2 import React, { useState } from 'react';
3 import { db } from './firebase';
4 import { collection, updateDoc, arrayUnion, doc, getDoc } from 'firebase/firestore';
5
1.
2.
3.
4.
5.
6.

TypeScript
1 export default function KitchenAssistant() {
2   const [command, setCommand] = useState('');
3   const [response, setResponse] = useState('');
4   const [recognition, setRecognition] = useState<SpeechRecognition | null>(null);
5
1.
2.
3.
4.
5.
6.

TypeScript
1 const handleVoiceCommand = async (commandText: string) => {
2   setCommand(commandText.toLowerCase());
3   const closingStatements = ["no thank you", "thank you", "that's all", "goodbye", "i'm done"];
4 const isClosingStatement = closingStatements.some(statement => commandText.includes(statement));
5​
6   if (isClosingStatement) {
7     const closingResponse = "Thank you! If you need anything else, just ask. Have a great day!";
8     setResponse(closingResponse);
9     speak(closingResponse);
10    return;
11  }
12​
13   if (commandText.includes("suggest a recipe")) {
14    await suggestRecipe();
15  } else if (commandText.includes("add items to pantry")) {
16    setResponse("Sure, start telling me the items you'd like to add.");
17    speak("Sure, start telling me the items you'd like to add.");
18  }
19 };
20​
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

TypeScript
1 const handleGeneralCommand = async (commandText: string) => {
2   try {
3     const res = await fetch('/api/llama', {
4     method: 'POST',
5     headers: { 'Content-Type': 'application/json' },
6     body: JSON.stringify({ command: commandText }),
7    });
8    const data = await res.json();
9    setResponse(data.response);
10    speak(data.response);
11  } catch (error) {
12    setResponse("Sorry, I couldn't process your request.");
13    speak("Sorry, I couldn't process your request.");
14  }
15 }; 
16​
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

TypeScript
1 const addToGroceryList = async (itemName: string, quantity: number) => {
2   try {
3     const expiryDate = new Date();
4     expiryDate.setDate(expiryDate.getDate() + 7);
5     const docRef = doc(db, 'grocery-list', 'Available Grocery Items');
6     await updateDoc(docRef, {
7       items: arrayUnion({
8         itemName,
9         quantity,
10        expiryDate: expiryDate.toISOString(),
11      }),
12    });
13    const responseText = `Grocery list updated. You now have: ${itemName} (${quantity}).`;
14    setResponse(responseText);
15    speak(responseText);
16  } catch (error) {
17    setResponse("Sorry, I couldn't add the item to the list.");
18    speak("Sorry, I couldn't add the item to the list.");
19  }
20 };
21
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

TypeScript
1 const startRecognition = () => {
2 const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition;
3  const newRecognition = new SpeechRecognition();
4  newRecognition.lang = 'en-US';
5  newRecognition.onresult = (event: any) => {
6    const speechToText = event.results[0][0].transcript;
7    handleVoiceCommand(speechToText);
8  };
9  newRecognition.start();
10  setRecognition(newRecognition);
11 };
12
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

JavaScript
1 const SpeechRecognition = window.SpeechRecognition || (window as any).webkitSpeechRecognition;
1.
2.

TypeScript
1 return (
2   <div className="flex min-h-screen">
3     <div className="w-1/2 background-image"></div>
4     <div className="w-1/2 flex flex-col justify-center p-8 bg-white bg-opacity-80">
5       <h1 className="text-4xl font-bold mb-8 text-indigo-500">Welcome to Chent</h1>
6       <div className="button-group flex justify-between mb-8">
7        <button onClick={startRecognition} className="bg-green-500">Start Listening</button>
8       <button onClick={interruptSpeech} className="bg-yellow-500">Interrupt</button>
9      </div>
10      <div className="transcript">{command}</div>
11      <div className="response">{response}</div>
12    </div>
13  </div>
14​
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.