本教程的内容技术性不是很强；为了充分利用AI，你要有Python编程和Web开发方面的知识。本教程中的代码片段使用Python、JavaScript、HTML5和CSS3来编写。

人工智能（AI）已经成为现代软件应用程序不可或缺的一部分，因为它可以为传统应用程序添加更强大的功能。本教程将指导你使用一种简单的方法来构建AI应用程序。

人工智能（AI）已经成为现代软件应用程序不可或缺的一部分，因为它可以为传统应用程序添加前所未有的更强大功能，比如语音识别、图像检测/分类以及自然语言处理（NLP）等等。

众所周知，AI应用程序稳健可靠且更智能。许多大公司已经在其应用程序的核心采用了AI，随着AI不断进步，越来越多的公司会继续采用这项技术，它们认为有必要运用AI以满足特定的业务需求。

你也可以构建一个AI应用程序，它没必要非得像Netflix或Instagram那么庞大，至少现在就可以构建了。

先决条件

本教程的内容技术性不是很强；为了充分利用AI，你要有Python编程和Web开发方面的知识。本教程中的代码片段使用Python、JavaScript、HTML5和CSS3来编写。

目标

通过本教程，你应该能够：

• 了解AI应用程序以及它们与传统软件应用程序的不同之处。
• 自行构建一个基本的AI应用程序。
• AI应用程序相对传统非AI应用程序具有的重要性。

什么是AI应用程序？

AI应用程序是指部分或完全使用AI来解决通常需要人类智能的任务的软件，比如互联网应用程序、移动应用程序或任何其他平台应用程序。

目前有许多AI应用程序在运行，其中许多我们每天都在使用，只不过没有意识到罢了。Instagram、Facebook、WhatsApp、Netflix、Google、ChatGPT和ClaudeAi等都是以某种方式使用AI的流行AI应用程序。

这些应用程序的AI组件从数据集学习，从中它们可以理解模式和复杂性，并利用这些信息来解决分派给它们的任务。比如说，谷歌搜索引擎利用LLM（大语言模型）来执行文本自动补全和语义搜索，而不仅仅是对分派给它的查询进行关键字搜索；这使它能够检索与用户想要搜索的内容属于相同上下文或意义最接近的结果，即使用户使用不同的关键字来输入搜索提示。

此外，谷歌Lens利用计算机视觉的强大功能进行图像搜索，因为它已经使用含有图像的庞大数据集进行了训练；它能够对图像进行分类，可以告诉你图像是什么。Instagram利用AI作为推荐算法的一部分，借助一种名为非监督机器学习的方法，向用户展示符合他们偏好的针对性广告和帖子。这些是AI应用程序中实施AI的几个例子。

AI应用程序与非AI应用程序之间的差异

AI应用程序与非AI应用程序的主要区别在于它们如何处理数据、做出决策以及逐渐适应。

• AI应用程序可以基于概率模型做出决策，通常使用机器学习、自然语言处理或计算机视觉等技术。比如说，AI应用程序中的推荐系统可以根据用户过去的行为推荐商品。与此同时，非AI应用程序依赖一组固定的指令来执行任务。它们的决定是预先确定的，如果不另外编程，它们不会考虑新的数据或用户特定的细微差别。
• AI应用程序使用预定义的算法从数据集学习，它们可以在没有明确编程的情况下凭借算法做出决定。然而，非AI应用程序遵循一套硬编码的编程规则“if-else”，面对异常它们无法做出决定。
• AI应用程序可以很容易适应新情况，识别新模式并提供相关反馈。与此同时，非AI应用程序没有那么灵活，它们只能处理结构和可预测的情况。

不同类型的AI应用程序

视用例和应用程序所要解决的问题而定，有许多方法可以使用AI来构建智能应用程序。以下是实施AI应用程序的几种常见方式。

1. 自然语言处理：这类应用程序可以理解你在说什么或输入什么，比如Siri或Alexa。它们适用于语音命令和聊天机器人，可以回答问题或帮助客户支持。
2. 计算机视觉：想想那些为你“看见”的应用程序，比如你的手机识别人脸以解锁，或者谷歌Photos帮你整理照片。这些AI应用程序用于从社交媒体到安全系统的各个领域。
3. 推荐系统：这是你的Netflix推荐或Spotify播放列表背后的引擎。它们根据你过去的选择来确定你可能喜欢什么，可以为你提供个性化的体验。
4. 自动任务应用程序：如果你使用过聊天机器人来回答常见问题，或者使用过扫描和组织文档的工具，表明你接触过这种类型的AI。它非常适合在没有人干预的情况下处理重复性任务。
5. 创意类AI应用程序：AI具有惊人的创意！这类应用程序可以制作艺术、编写故事，甚至根据你的输入生成个性化设计，比如AI艺术生成器或文本编写工具。
6. 自动驾驶和自主系统：想想自动驾驶汽车、机器人吸尘器或独立操作的无人机。它们都是在没有持续指导的情况下利用AI来处理复杂任务。

快速构建自己的AI应用程序

如上所述，可以通过多种方式利用AI以构建一个智能应用程序，但就本教程而言，我们将坚持使用简约的方法来构建一个LLM支持的AI聊天机器人。

过程：

选择一个青睐的公开可用的预训练LLM，其API密钥将用于访问其API。在本文中，我们使用OpenAI的GPT-4。

在桌面上创建一个名为“AI_APP”的文件夹，安装VSCode，进入到该文件夹。假设你已经下载并安装了Python；如果没有，那么在进入下一步之前先完成这一步。

创建一个虚拟环境。如果你使用Linux OS（操作系统），请在命令提示符中运行这些命令，以创建和激活虚拟环境。

复制

python3 -m venv myvenv source myvenv/bin/activate

• 1.
• 2.

如果你使用Windows操作系统，则运行这些命令：

复制

python -m venv myenv myenv\Scripts\activate

• 1.
• 2.

安装项目所需的依赖项（Flask, requests）。

复制

pip install flask requests

• 1.

设置应用程序结构：

复制

AI_APP/ ├── app.py # where your application instance and logic will be ├── templates/ └── index.html # html template to display the front end of your app └── static/ └── style.css # for styling your front-end/templates

• 1.
• 2.
• 3.
• 4.
• 5.

在VSCode中设置好应用程序结构后，你就可以立即开始编写应用程序了。

在app.py文件中，为Flask应用程序创建实例，创建路由，接收从前端传递的提示消息，并使用‘requests’库向OpenAI API发送‘POST’请求。然后接收文本响应，处理它，并将其传递给前端，如下面的代码片段所示：

复制

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)

• 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.

在index.html文件中，编写下面的代码以创建用户可以与之交互的基础前端。提示消息由用户输入，通过Javascript转换成JSON，最后发送到后端进行进一步处理，如上面的代码片段所示。下面是AI应用程序的基本前端实现。

复制

<!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>

• 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.

不妨创建应用程序前端的样式。将下列代码片段添加到你的style.css文件。

复制

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; }

• 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.

好了，现在你已有了一个基础的基于AI的聊天机器人了。

结论

AI正在彻底改变现代应用程序的功能，如果运用得当，可以提升性能和用户体验。如果你已经确定了用例，那么构建AI应用程序可能是一项有回报的投入。实际情况也许比本教程中演示的复杂一点或复杂得多，它可能是一个垃圾邮件检测、欺诈检测、推荐系统甚至图像分类应用程序。

文章来自：51CTO