人工智能（AI）已經(jīng)成為現(xiàn)代軟件應(yīng)用程序不可或缺的一部分，因為它可以為傳統(tǒng)應(yīng)用程序添加更強(qiáng)大的功能。本教程將指導(dǎo)你使用一種簡單的方法來構(gòu)建AI應(yīng)用程序。

人工智能（AI）已經(jīng)成為現(xiàn)代軟件應(yīng)用程序不可或缺的一部分，因為它可以為傳統(tǒng)應(yīng)用程序添加前所未有的更強(qiáng)大功能，比如語音識別、圖像檢測/分類以及自然語言處理（NLP）等等。

眾所周知，AI應(yīng)用程序穩(wěn)健可靠且更智能。許多大公司已經(jīng)在其應(yīng)用程序的核心采用了AI，隨著AI不斷進(jìn)步，越來越多的公司會繼續(xù)采用這項技術(shù)，它們認(rèn)為有必要運(yùn)用AI以滿足特定的業(yè)務(wù)需求。

你也可以構(gòu)建一個AI應(yīng)用程序，它沒必要非得像Netflix或Instagram那么龐大，至少現(xiàn)在就可以構(gòu)建了。

先決條件

本教程的內(nèi)容技術(shù)性不是很強(qiáng)；為了充分利用AI，你要有Python編程和Web開發(fā)方面的知識。本教程中的代碼片段使用Python、JavaScript、HTML5和CSS3來編寫。

目標(biāo)

通過本教程，你應(yīng)該能夠：

• 了解AI應(yīng)用程序以及它們與傳統(tǒng)軟件應(yīng)用程序的不同之處。
• 自行構(gòu)建一個基本的AI應(yīng)用程序。
• AI應(yīng)用程序相對傳統(tǒng)非AI應(yīng)用程序具有的重要性。

什么是AI應(yīng)用程序？

AI應(yīng)用程序是指部分或完全使用AI來解決通常需要人類智能的任務(wù)的軟件，比如互聯(lián)網(wǎng)應(yīng)用程序、移動應(yīng)用程序或任何其他平臺應(yīng)用程序。

目前有許多AI應(yīng)用程序在運(yùn)行，其中許多我們每天都在使用，只不過沒有意識到罷了。Instagram、Facebook、WhatsApp、Netflix、Google、ChatGPT和ClaudeAi等都是以某種方式使用AI的流行AI應(yīng)用程序。

這些應(yīng)用程序的AI組件從數(shù)據(jù)集學(xué)習(xí)，從中它們可以理解模式和復(fù)雜性，并利用這些信息來解決分派給它們的任務(wù)。比如說，谷歌搜索引擎利用LLM（大語言模型）來執(zhí)行文本自動補(bǔ)全和語義搜索，而不僅僅是對分派給它的查詢進(jìn)行關(guān)鍵字搜索；這使它能夠檢索與用戶想要搜索的內(nèi)容屬于相同上下文或意義最接近的結(jié)果，即使用戶使用不同的關(guān)鍵字來輸入搜索提示。

此外，谷歌Lens利用計算機(jī)視覺的強(qiáng)大功能進(jìn)行圖像搜索，因為它已經(jīng)使用含有圖像的龐大數(shù)據(jù)集進(jìn)行了訓(xùn)練；它能夠?qū)D像進(jìn)行分類，可以告訴你圖像是什么。Instagram利用AI作為推薦算法的一部分，借助一種名為非監(jiān)督機(jī)器學(xué)習(xí)的方法，向用戶展示符合他們偏好的針對性廣告和帖子。這些是AI應(yīng)用程序中實施AI的幾個例子。

AI應(yīng)用程序與非AI應(yīng)用程序之間的差異

AI應(yīng)用程序與非AI應(yīng)用程序的主要區(qū)別在于它們?nèi)绾翁幚頂?shù)據(jù)、做出決策以及逐漸適應(yīng)。

• AI應(yīng)用程序可以基于概率模型做出決策，通常使用機(jī)器學(xué)習(xí)、自然語言處理或計算機(jī)視覺等技術(shù)。比如說，AI應(yīng)用程序中的推薦系統(tǒng)可以根據(jù)用戶過去的行為推薦商品。與此同時，非AI應(yīng)用程序依賴一組固定的指令來執(zhí)行任務(wù)。它們的決定是預(yù)先確定的，如果不另外編程，它們不會考慮新的數(shù)據(jù)或用戶特定的細(xì)微差別。
• AI應(yīng)用程序使用預(yù)定義的算法從數(shù)據(jù)集學(xué)習(xí)，它們可以在沒有明確編程的情況下憑借算法做出決定。然而，非AI應(yīng)用程序遵循一套硬編碼的編程規(guī)則“if-else”，面對異常它們無法做出決定。
• AI應(yīng)用程序可以很容易適應(yīng)新情況，識別新模式并提供相關(guān)反饋。與此同時，非AI應(yīng)用程序沒有那么靈活，它們只能處理結(jié)構(gòu)和可預(yù)測的情況。

不同類型的AI應(yīng)用程序

視用例和應(yīng)用程序所要解決的問題而定，有許多方法可以使用AI來構(gòu)建智能應(yīng)用程序。以下是實施AI應(yīng)用程序的幾種常見方式。

1. 自然語言處理：這類應(yīng)用程序可以理解你在說什么或輸入什么，比如Siri或Alexa。它們適用于語音命令和聊天機(jī)器人，可以回答問題或幫助客戶支持。

2. 計算機(jī)視覺：想想那些為你“看見”的應(yīng)用程序，比如你的手機(jī)識別人臉以解鎖，或者谷歌Photos幫你整理照片。這些AI應(yīng)用程序用于從社交媒體到安全系統(tǒng)的各個領(lǐng)域。

3. 推薦系統(tǒng)：這是你的Netflix推薦或Spotify播放列表背后的引擎。它們根據(jù)你過去的選擇來確定你可能喜歡什么，可以為你提供個性化的體驗。

4. 自動任務(wù)應(yīng)用程序：如果你使用過聊天機(jī)器人來回答常見問題，或者使用過掃描和組織文檔的工具，表明你接觸過這種類型的AI。它非常適合在沒有人干預(yù)的情況下處理重復(fù)性任務(wù)。

5. 創(chuàng)意類AI應(yīng)用程序：AI具有驚人的創(chuàng)意！這類應(yīng)用程序可以制作藝術(shù)、編寫故事，甚至根據(jù)你的輸入生成個性化設(shè)計，比如AI藝術(shù)生成器或文本編寫工具。

6. 自動駕駛和自主系統(tǒng)：想想自動駕駛汽車、機(jī)器人吸塵器或獨(dú)立操作的無人機(jī)。它們都是在沒有持續(xù)指導(dǎo)的情況下利用AI來處理復(fù)雜任務(wù)。

快速構(gòu)建自己的AI應(yīng)用程序

如上所述，可以通過多種方式利用AI以構(gòu)建一個智能應(yīng)用程序，但就本教程而言，我們將堅持使用簡約的方法來構(gòu)建一個LLM支持的AI聊天機(jī)器人。

過程：

選擇一個青睞的公開可用的預(yù)訓(xùn)練LLM，其API密鑰將用于訪問其API。在本文中，我們使用OpenAI的GPT-4。

在桌面上創(chuàng)建一個名為“AI_APP”的文件夾，安裝VSCode，進(jìn)入到該文件夾。假設(shè)你已經(jīng)下載并安裝了Python；如果沒有，那么在進(jìn)入下一步之前先完成這一步。

創(chuàng)建一個虛擬環(huán)境。如果你使用Linux OS（操作系統(tǒng)），請在命令提示符中運(yùn)行這些命令，以創(chuàng)建和激活虛擬環(huán)境。

python3 -m venv myvenv
source myvenv/bin/activate

如果你使用Windows操作系統(tǒng)，則運(yùn)行這些命令：

python -m venv myenv
myenv\Scripts\activate

安裝項目所需的依賴項（Flask, requests）。

pip install flask requests

設(shè)置應(yīng)用程序結(jié)構(gòu)：

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

在VSCode中設(shè)置好應(yīng)用程序結(jié)構(gòu)后，你就可以立即開始編寫應(yīng)用程序了。

在app.py文件中，為Flask應(yīng)用程序創(chuàng)建實例，創(chuàng)建路由，接收從前端傳遞的提示消息，并使用‘requests’庫向OpenAI API發(fā)送‘POST’請求。然后接收文本響應(yīng)，處理它，并將其傳遞給前端，如下面的代碼片段所示：

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)

在index.html文件中，編寫下面的代碼以創(chuàng)建用戶可以與之交互的基礎(chǔ)前端。提示消息由用戶輸入，通過Javascript轉(zhuǎn)換成JSON，最后發(fā)送到后端進(jìn)行進(jìn)一步處理，如上面的代碼片段所示。下面是AI應(yīng)用程序的基本前端實現(xià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="{{ url_for('static', filename='style.css') }}">
</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>

不妨創(chuàng)建應(yīng)用程序前端的樣式。將下列代碼片段添加到你的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;
}

好了，現(xiàn)在你已有了一個基礎(chǔ)的基于AI的聊天機(jī)器人了。

結(jié)論

AI正在徹底改變現(xiàn)代應(yīng)用程序的功能，如果運(yùn)用得當(dāng)，可以提升性能和用戶體驗。如果你已經(jīng)確定了用例，那么構(gòu)建AI應(yīng)用程序可能是一項有回報的投入。實際情況也許比本教程中演示的復(fù)雜一點或復(fù)雜得多，它可能是一個垃圾郵件檢測、欺詐檢測、推薦系統(tǒng)甚至圖像分類應(yīng)用程序。

原文標(biāo)題：??DIY AI: Building Your AI Apps on a Shoestring Budget??，作者：Shittu Olumide