![\"\"](\"https:\/\/aiforumimage.oss-cn-shanghai.aliyuncs.com\/wp-content\/uploads\/2024\/12\/bb3146b4-f557-4380-95f3-3e38d1ad46d0-300x167-1.png\")
<\/p>\n<\/p>\n
\u672c\u6559\u7a0b\u7684\u5185\u5bb9\u6280\u672f\u6027\u4e0d\u662f\u5f88\u5f3a\uff1b\u4e3a\u4e86\u5145\u5206\u5229\u7528AI\uff0c\u4f60\u8981\u6709Python\u7f16\u7a0b\u548cWeb\u5f00\u53d1\u65b9\u9762\u7684\u77e5\u8bc6\u3002\u672c\u6559\u7a0b\u4e2d\u7684\u4ee3\u7801\u7247\u6bb5\u4f7f\u7528Python\u3001JavaScript\u3001HTML5\u548cCSS3\u6765\u7f16\u5199\u3002<\/p>\n
<\/p>\n
\u4eba\u5de5\u667a\u80fd\uff08AI\uff09\u5df2\u7ecf\u6210\u4e3a\u73b0\u4ee3\u8f6f\u4ef6\u5e94\u7528\u7a0b\u5e8f\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u4e3a\u4f20\u7edf\u5e94\u7528\u7a0b\u5e8f\u6dfb\u52a0\u66f4\u5f3a\u5927\u7684\u529f\u80fd\u3002\u672c\u6559\u7a0b\u5c06\u6307\u5bfc\u4f60\u4f7f\u7528\u4e00\u79cd\u7b80\u5355\u7684\u65b9\u6cd5\u6765\u6784\u5efaAI\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\u4eba\u5de5\u667a\u80fd\uff08AI\uff09\u5df2\u7ecf\u6210\u4e3a\u73b0\u4ee3\u8f6f\u4ef6\u5e94\u7528\u7a0b\u5e8f\u4e0d\u53ef\u6216\u7f3a\u7684\u4e00\u90e8\u5206\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u4e3a\u4f20\u7edf\u5e94\u7528\u7a0b\u5e8f\u6dfb\u52a0\u524d\u6240\u672a\u6709\u7684\u66f4\u5f3a\u5927\u529f\u80fd\uff0c\u6bd4\u5982\u8bed\u97f3\u8bc6\u522b\u3001\u56fe\u50cf\u68c0\u6d4b\/\u5206\u7c7b\u4ee5\u53ca\u81ea\u7136\u8bed\u8a00\u5904\u7406\uff08NLP\uff09\u7b49\u7b49\u3002<\/p>\n
\u4f17\u6240\u5468\u77e5\uff0cAI\u5e94\u7528\u7a0b\u5e8f\u7a33\u5065\u53ef\u9760\u4e14\u66f4\u667a\u80fd\u3002\u8bb8\u591a\u5927\u516c\u53f8\u5df2\u7ecf\u5728\u5176\u5e94\u7528\u7a0b\u5e8f\u7684\u6838\u5fc3\u91c7\u7528\u4e86AI\uff0c\u968f\u7740AI\u4e0d\u65ad\u8fdb\u6b65\uff0c\u8d8a\u6765\u8d8a\u591a\u7684\u516c\u53f8\u4f1a\u7ee7\u7eed\u91c7\u7528\u8fd9\u9879\u6280\u672f\uff0c\u5b83\u4eec\u8ba4\u4e3a\u6709\u5fc5\u8981\u8fd0\u7528AI\u4ee5\u6ee1\u8db3\u7279\u5b9a\u7684\u4e1a\u52a1\u9700\u6c42\u3002<\/p>\n
\u4f60\u4e5f\u53ef\u4ee5\u6784\u5efa\u4e00\u4e2aAI\u5e94\u7528\u7a0b\u5e8f\uff0c\u5b83\u6ca1\u5fc5\u8981\u975e\u5f97\u50cfNetflix\u6216Instagram\u90a3\u4e48\u5e9e\u5927\uff0c\u81f3\u5c11\u73b0\u5728\u5c31\u53ef\u4ee5\u6784\u5efa\u4e86\u3002<\/p>\n
\u672c\u6559\u7a0b\u7684\u5185\u5bb9\u6280\u672f\u6027\u4e0d\u662f\u5f88\u5f3a\uff1b\u4e3a\u4e86\u5145\u5206\u5229\u7528AI\uff0c\u4f60\u8981\u6709Python\u7f16\u7a0b\u548cWeb\u5f00\u53d1\u65b9\u9762\u7684\u77e5\u8bc6\u3002\u672c\u6559\u7a0b\u4e2d\u7684\u4ee3\u7801\u7247\u6bb5\u4f7f\u7528Python\u3001JavaScript\u3001HTML5\u548cCSS3\u6765\u7f16\u5199\u3002<\/p>\n
\u901a\u8fc7\u672c\u6559\u7a0b\uff0c\u4f60\u5e94\u8be5\u80fd\u591f\uff1a<\/p>\n
AI\u5e94\u7528\u7a0b\u5e8f\u662f\u6307\u90e8\u5206\u6216\u5b8c\u5168\u4f7f\u7528AI\u6765\u89e3\u51b3\u901a\u5e38\u9700\u8981\u4eba\u7c7b\u667a\u80fd\u7684\u4efb\u52a1\u7684\u8f6f\u4ef6\uff0c\u6bd4\u5982\u4e92\u8054\u7f51\u5e94\u7528\u7a0b\u5e8f\u3001\u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u6216\u4efb\u4f55\u5176\u4ed6\u5e73\u53f0\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\u76ee\u524d\u6709\u8bb8\u591aAI\u5e94\u7528\u7a0b\u5e8f\u5728\u8fd0\u884c\uff0c\u5176\u4e2d\u8bb8\u591a\u6211\u4eec\u6bcf\u5929\u90fd\u5728\u4f7f\u7528\uff0c\u53ea\u4e0d\u8fc7\u6ca1\u6709\u610f\u8bc6\u5230\u7f62\u4e86\u3002Instagram\u3001Facebook\u3001WhatsApp\u3001Netflix\u3001Google\u3001ChatGPT\u548cClaudeAi\u7b49\u90fd\u662f\u4ee5\u67d0\u79cd\u65b9\u5f0f\u4f7f\u7528AI\u7684\u6d41\u884cAI\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\u8fd9\u4e9b\u5e94\u7528\u7a0b\u5e8f\u7684AI\u7ec4\u4ef6\u4ece\u6570\u636e\u96c6\u5b66\u4e60\uff0c\u4ece\u4e2d\u5b83\u4eec\u53ef\u4ee5\u7406\u89e3\u6a21\u5f0f\u548c\u590d\u6742\u6027\uff0c\u5e76\u5229\u7528\u8fd9\u4e9b\u4fe1\u606f\u6765\u89e3\u51b3\u5206\u6d3e\u7ed9\u5b83\u4eec\u7684\u4efb\u52a1\u3002\u6bd4\u5982\u8bf4\uff0c\u8c37\u6b4c\u641c\u7d22\u5f15\u64ce\u5229\u7528LLM\uff08\u5927\u8bed\u8a00\u6a21\u578b\uff09\u6765\u6267\u884c\u6587\u672c\u81ea\u52a8\u8865\u5168\u548c\u8bed\u4e49\u641c\u7d22\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u5bf9\u5206\u6d3e\u7ed9\u5b83\u7684\u67e5\u8be2\u8fdb\u884c\u5173\u952e\u5b57\u641c\u7d22\uff1b\u8fd9\u4f7f\u5b83\u80fd\u591f\u68c0\u7d22\u4e0e\u7528\u6237\u60f3\u8981\u641c\u7d22\u7684\u5185\u5bb9\u5c5e\u4e8e\u76f8\u540c\u4e0a\u4e0b\u6587\u6216\u610f\u4e49\u6700\u63a5\u8fd1\u7684\u7ed3\u679c\uff0c\u5373\u4f7f\u7528\u6237\u4f7f\u7528\u4e0d\u540c\u7684\u5173\u952e\u5b57\u6765\u8f93\u5165\u641c\u7d22\u63d0\u793a\u3002<\/p>\n
\u6b64\u5916\uff0c\u8c37\u6b4cLens\u5229\u7528\u8ba1\u7b97\u673a\u89c6\u89c9\u7684\u5f3a\u5927\u529f\u80fd\u8fdb\u884c\u56fe\u50cf\u641c\u7d22\uff0c\u56e0\u4e3a\u5b83\u5df2\u7ecf\u4f7f\u7528\u542b\u6709\u56fe\u50cf\u7684\u5e9e\u5927\u6570\u636e\u96c6\u8fdb\u884c\u4e86\u8bad\u7ec3\uff1b\u5b83\u80fd\u591f\u5bf9\u56fe\u50cf\u8fdb\u884c\u5206\u7c7b\uff0c\u53ef\u4ee5\u544a\u8bc9\u4f60\u56fe\u50cf\u662f\u4ec0\u4e48\u3002Instagram\u5229\u7528AI\u4f5c\u4e3a\u63a8\u8350\u7b97\u6cd5\u7684\u4e00\u90e8\u5206\uff0c\u501f\u52a9\u4e00\u79cd\u540d\u4e3a\u975e\u76d1\u7763\u673a\u5668\u5b66\u4e60\u7684\u65b9\u6cd5\uff0c\u5411\u7528\u6237\u5c55\u793a\u7b26\u5408\u4ed6\u4eec\u504f\u597d\u7684\u9488\u5bf9\u6027\u5e7f\u544a\u548c\u5e16\u5b50\u3002\u8fd9\u4e9b\u662fAI\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5b9e\u65bdAI\u7684\u51e0\u4e2a\u4f8b\u5b50\u3002<\/p>\n
AI\u5e94\u7528\u7a0b\u5e8f\u4e0e\u975eAI\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u8981\u533a\u522b\u5728\u4e8e\u5b83\u4eec\u5982\u4f55\u5904\u7406\u6570\u636e\u3001\u505a\u51fa\u51b3\u7b56\u4ee5\u53ca\u9010\u6e10\u9002\u5e94\u3002<\/p>\n
\u89c6\u7528\u4f8b\u548c\u5e94\u7528\u7a0b\u5e8f\u6240\u8981\u89e3\u51b3\u7684\u95ee\u9898\u800c\u5b9a\uff0c\u6709\u8bb8\u591a\u65b9\u6cd5\u53ef\u4ee5\u4f7f\u7528AI\u6765\u6784\u5efa\u667a\u80fd\u5e94\u7528\u7a0b\u5e8f\u3002\u4ee5\u4e0b\u662f\u5b9e\u65bdAI\u5e94\u7528\u7a0b\u5e8f\u7684\u51e0\u79cd\u5e38\u89c1\u65b9\u5f0f\u3002<\/p>\n
\u5982\u4e0a\u6240\u8ff0\uff0c\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5229\u7528AI\u4ee5\u6784\u5efa\u4e00\u4e2a\u667a\u80fd\u5e94\u7528\u7a0b\u5e8f\uff0c\u4f46\u5c31\u672c\u6559\u7a0b\u800c\u8a00\uff0c\u6211\u4eec\u5c06\u575a\u6301\u4f7f\u7528\u7b80\u7ea6\u7684\u65b9\u6cd5\u6765\u6784\u5efa\u4e00\u4e2aLLM\u652f\u6301\u7684AI\u804a\u5929\u673a\u5668\u4eba\u3002<\/p>\n
\u9009\u62e9\u4e00\u4e2a\u9752\u7750\u7684\u516c\u5f00\u53ef\u7528\u7684\u9884\u8bad\u7ec3LLM\uff0c\u5176API\u5bc6\u94a5\u5c06\u7528\u4e8e\u8bbf\u95ee\u5176API\u3002\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528OpenAI\u7684GPT-4\u3002<\/p>\n
\u5728\u684c\u9762\u4e0a\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a\u201cAI_APP\u201d\u7684\u6587\u4ef6\u5939\uff0c\u5b89\u88c5VSCode\uff0c\u8fdb\u5165\u5230\u8be5\u6587\u4ef6\u5939\u3002\u5047\u8bbe\u4f60\u5df2\u7ecf\u4e0b\u8f7d\u5e76\u5b89\u88c5\u4e86Python\uff1b\u5982\u679c\u6ca1\u6709\uff0c\u90a3\u4e48\u5728\u8fdb\u5165\u4e0b\u4e00\u6b65\u4e4b\u524d\u5148\u5b8c\u6210\u8fd9\u4e00\u6b65\u3002<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u865a\u62df\u73af\u5883\u3002\u5982\u679c\u4f60\u4f7f\u7528Linux OS\uff08\u64cd\u4f5c\u7cfb\u7edf\uff09\uff0c\u8bf7\u5728\u547d\u4ee4\u63d0\u793a\u7b26\u4e2d\u8fd0\u884c\u8fd9\u4e9b\u547d\u4ee4\uff0c\u4ee5\u521b\u5efa\u548c\u6fc0\u6d3b\u865a\u62df\u73af\u5883\u3002<\/p>\n
\u590d\u5236<\/p>\n
python3 -m venv myvenv source myvenv\/bin\/activate<\/p>\n
\u5982\u679c\u4f60\u4f7f\u7528Windows\u64cd\u4f5c\u7cfb\u7edf\uff0c\u5219\u8fd0\u884c\u8fd9\u4e9b\u547d\u4ee4\uff1a<\/p>\n
\u590d\u5236<\/p>\n
python -m venv myenv myenv\\Scripts\\activate<\/p>\n
\u5b89\u88c5\u9879\u76ee\u6240\u9700\u7684\u4f9d\u8d56\u9879\uff08Flask, requests\uff09\u3002<\/p>\n
\u590d\u5236<\/p>\n
pip install flask requests<\/p>\n
\u8bbe\u7f6e\u5e94\u7528\u7a0b\u5e8f\u7ed3\u6784\uff1a<\/p>\n
\u590d\u5236<\/p>\n
AI_APP\/ \u251c\u2500\u2500 app.py # where your application instance and logic will be \u251c\u2500\u2500 templates\/ \u2514\u2500\u2500 index.html # html template to display the front end of your app \u2514\u2500\u2500 static\/ \u2514\u2500\u2500 style.css # for styling your front-end\/templates<\/p>\n
\u5728VSCode\u4e2d\u8bbe\u7f6e\u597d\u5e94\u7528\u7a0b\u5e8f\u7ed3\u6784\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u7acb\u5373\u5f00\u59cb\u7f16\u5199\u5e94\u7528\u7a0b\u5e8f\u4e86\u3002<\/p>\n
\u5728app.py\u6587\u4ef6\u4e2d\uff0c\u4e3aFlask\u5e94\u7528\u7a0b\u5e8f\u521b\u5efa\u5b9e\u4f8b\uff0c\u521b\u5efa\u8def\u7531\uff0c\u63a5\u6536\u4ece\u524d\u7aef\u4f20\u9012\u7684\u63d0\u793a\u6d88\u606f\uff0c\u5e76\u4f7f\u7528\u2018requests\u2019\u5e93\u5411OpenAI API\u53d1\u9001\u2018POST\u2019\u8bf7\u6c42\u3002\u7136\u540e\u63a5\u6536\u6587\u672c\u54cd\u5e94\uff0c\u5904\u7406\u5b83\uff0c\u5e76\u5c06\u5176\u4f20\u9012\u7ed9\u524d\u7aef\uff0c\u5982\u4e0b\u9762\u7684\u4ee3\u7801\u7247\u6bb5\u6240\u793a\uff1a<\/p>\n
\u590d\u5236<\/p>\n
from flask import Flask, render_template, request, jsonify import requests import os app = Flask(__name__) # Load your API key securely (consider using environment variables) OPENAI_API_KEY = os.getenv(“OPENAI_API_KEY”) # Set this in your environment or replace it with the actual key. @app.route(“\/”) def home(): return render_template(“index.html”) @app.route(“\/ask_question”, methods=[“POST”]) def ask(): user_message = request.json[“message”] # Call GPT-4 API with the user’s message response = openai_call(user_message) return jsonify({“response”: response}) def openai_call(message): headers = { “Authorization”: f”Bearer {OPENAI_API_KEY}”, “Content-Type”: “application\/JSON”, } data = { “model”: “gpt-4”, “messages”: [{“role”: “user”, “content”: message}], } # Make the request to OpenAI API response = requests.post(“https:\/\/api.openai.com\/v1\/chat\/completions”, headers=headers, json=data) if response.status_code == 200: return response.json()[“choices”][0][“message”][“content”] else: return “Error: Could not reach the OpenAI API” if __name__ == “__main__”: app.run(debug=True)<\/p>\n
\u5728index.html\u6587\u4ef6\u4e2d\uff0c\u7f16\u5199\u4e0b\u9762\u7684\u4ee3\u7801\u4ee5\u521b\u5efa\u7528\u6237\u53ef\u4ee5\u4e0e\u4e4b\u4ea4\u4e92\u7684\u57fa\u7840\u524d\u7aef\u3002\u63d0\u793a\u6d88\u606f\u7531\u7528\u6237\u8f93\u5165\uff0c\u901a\u8fc7Javascript\u8f6c\u6362\u6210JSON\uff0c\u6700\u540e\u53d1\u9001\u5230\u540e\u7aef\u8fdb\u884c\u8fdb\u4e00\u6b65\u5904\u7406\uff0c\u5982\u4e0a\u9762\u7684\u4ee3\u7801\u7247\u6bb5\u6240\u793a\u3002\u4e0b\u9762\u662fAI\u5e94\u7528\u7a0b\u5e8f\u7684\u57fa\u672c\u524d\u7aef\u5b9e\u73b0\u3002<\/p>\n
\u590d\u5236<\/p>\n
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>AI Chatbot<\/title> <link rel=”stylesheet” href=”{{%20url_for(‘static’,%20filename=’style.css’)%20}}”> <\/head> <body> <div class=”chat-container”> <div id=”chat-box”><\/div> <input type=”text” id=”user-input” placeholder=”Please type your message here…” \/> <button onclick=”sendMessage()”>Send<\/button> <\/div> <script> function addMessage(content, isUser) { const chatBox = document.getElementById(“chat-box”); const messageDiv = document.createElement(“div”); messageDiv.className = isUser ? “user-message” : “bot-message”; messageDiv.textContent = content; chatBox.appendChild(messageDiv); chatBox.scrollTop = chatBox.scrollHeight; } async function sendMessage() { const userInput = document.getElementById(“user-input”).value; addMessage(userInput, true); \/\/ Send user input to the server const response = await fetch(“\/ask”, { method: “POST”, headers: { “Content-Type”: “application\/json” }, body: JSON.stringify({ message: userInput }) }); const data = await response.json(); addMessage(data.response, false); document.getElementById(“user-input”).value = “”; } <\/script> <\/body> <\/html><\/p>\n
\u4e0d\u59a8\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\u524d\u7aef\u7684\u6837\u5f0f\u3002\u5c06\u4e0b\u5217\u4ee3\u7801\u7247\u6bb5\u6dfb\u52a0\u5230\u4f60\u7684style.css\u6587\u4ef6\u3002<\/p>\n
\u590d\u5236<\/p>\n
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .chat-container { width: 400px; height: 500px; display: flex; flex-direction: column; border: 2px solid #ddd; border-radius: 8px; background-color: #fff; overflow: hidden; } #chat-box { flex: 1; padding: 10px; overflow-y: auto; } .user-message { text-align: right; padding: 8px; margin: 4px; background-color: #a6e1fa; border-radius: 8px; } .bot-message { text-align: left; padding: 8px; margin: 4px; background-color: #e0e0e0; border-radius: 8px; } input[type=”text”] { width: calc(100% – 60px); padding: 10px; border: none; outline: none; } button { padding: 10px; width: 60px; border: none; background-color: #007BFF; color: white; font-weight: bold; cursor: pointer; }<\/p>\n
\u597d\u4e86\uff0c\u73b0\u5728\u4f60\u5df2\u6709\u4e86\u4e00\u4e2a\u57fa\u7840\u7684\u57fa\u4e8eAI\u7684\u804a\u5929\u673a\u5668\u4eba\u4e86\u3002<\/p>\n
AI\u6b63\u5728\u5f7b\u5e95\u6539\u53d8\u73b0\u4ee3\u5e94\u7528\u7a0b\u5e8f\u7684\u529f\u80fd\uff0c\u5982\u679c\u8fd0\u7528\u5f97\u5f53\uff0c\u53ef\u4ee5\u63d0\u5347\u6027\u80fd\u548c\u7528\u6237\u4f53\u9a8c\u3002\u5982\u679c\u4f60\u5df2\u7ecf\u786e\u5b9a\u4e86\u7528\u4f8b\uff0c\u90a3\u4e48\u6784\u5efaAI\u5e94\u7528\u7a0b\u5e8f\u53ef\u80fd\u662f\u4e00\u9879\u6709\u56de\u62a5\u7684\u6295\u5165\u3002\u5b9e\u9645\u60c5\u51b5\u4e5f\u8bb8\u6bd4\u672c\u6559\u7a0b\u4e2d\u6f14\u793a\u7684\u590d\u6742\u4e00\u70b9\u6216\u590d\u6742\u5f97\u591a\uff0c\u5b83\u53ef\u80fd\u662f\u4e00\u4e2a\u5783\u573e\u90ae\u4ef6\u68c0\u6d4b\u3001\u6b3a\u8bc8\u68c0\u6d4b\u3001\u63a8\u8350\u7cfb\u7edf\u751a\u81f3\u56fe\u50cf\u5206\u7c7b\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\u6587\u7ae0\u6765\u81ea\uff1a51CTO<\/p>\n
<\/p>\n