Chào mừng năm mới 2023, Ngoton.IT gửi tới các bạn bài viết trong chủ đề về AI, Machine Learning, Deep Learning, Data Science, Xây dựng website tự động tạo văn bản sử dụng OpenAI GPT-2 kết với React và Flask.
Trong bài viết này, chúng ta sẽ xây dựng website tự động tạo văn bản bằng việc sử dụng model GPT-2 kết hợp với Back-end là Flask của Python cùng với Front-end chúng ta sẽ xây dựng bằng ReactJs. Kết quả cuối cùng chúng ta sẽ nhận được dưới đây:
OpenAI GPT-2 là gì?
Generative Pre-training Transformer 2 (GPT-2) là một mã nguồn mở trí tuệ nhân tạo do OpenAI tạo ra vào tháng 2 năm 2019. Nó có thể dịch văn bản, trả lời câu hỏi, tóm tắt đoạn văn và tạo đầu ra văn bản ở mức mà đôi khi không thể phân biệt được với mức của con người.
Kiến trúc GPT triển khai mạng deep neural network, cụ thể là mô hình Transformer, sử dụng attention thay cho kiến trúc dựa trên tích chập và đệ quy trước đó. Mô hình này cho phép tăng khả năng song song hóa lên rất nhiều và vượt trội so với các điểm chuẩn trước đó cho các mô hình dựa trên RNN/CNN/LSTM.
Các bạn có thể tự tìm hiểu thêm để rõ hơn nhé.
Tạo văn bản với GPT-2
Bây giờ, chúng ta bắt đầu với việc sử dụng GPT-2.
Chúng ta sẽ sử dụng package pytorch-transformers
1 2 3 4 5 |
# Download the transformers package pip3 install pytorch-transformers # Get only the text generation file from the repository wget https://raw.githubusercontent.com/huggingface/pytorch-transformers/master/examples/run_generation.py |
Bạn hãy chạy thử xem sao nhé
1 2 3 4 5 |
python3 run_generation.py \ --model_type=gpt2 \ --length=20 \ --model_name_or_path=gpt2 \ --promt="Hello world" |
Chúng ta sẽ sử dụng hàm generate_text để tạo ra văn bản từ nội dung bất kỳ. Ở trên mình dùng với 4 tham số: model_type, length, model_name_or_path, prompt
1 2 3 4 5 6 7 8 9 10 11 12 |
def generate_text( padding_text=None, model_type='gpt2', model_name_or_path='gpt2', prompt='', length=20, temperature=1.0, top_k=0, top_p=0.9, no_cuda=True, seed=42, ): |
Xây dựng backend server Flask
Phía back-end mình sẽ làm khá đơn giản, chỉ có một endpoint xử lý yêu cầu.
Body, sẽ cung cấp text đóng vai trò là “prompt” để GPT-2 tự động tạo nội dung tiếp theo.
Chúng ta cũng sẽ đưa ra một model là một trong 3 model GPT-2, cụ thể là nhỏ (117M), trung bình (345M) và lớn (774M).
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 |
from flask import Flask, abort, jsonify, request from flask_cors import CORS, cross_origin from .run_generation import generate_text app = Flask(__name__) cors = CORS(app) app.config['CORS_HEADERS'] = 'Content-Type' @app.route("/generate", methods=['POST']) @cross_origin() def get_gen(): data = request.get_json() if 'text' not in data or len(data['text']) == 0 or 'model' not in data: abort(400) else: text = data['text'] model = data['model'] result = generate_text( model_type='gpt2', length=100, prompt=text, model_name_or_path=model ) return jsonify({'result': result}) |
Giao diện website tự động tạo văn bản sử dụng OpenAI GPT-2
Chúng ta đã thiết lập máy chủ Flask của mình, đã đến lúc xây dựng giao diện người dùng.
Mình sẽ sử dụng material-ui để có các điều khiển biểu mẫu ưa thích. Được rồi, hãy thiết lập ứng dụng React của chúng ta:
App.js
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 |
import React, { useState } from 'react'; import Button from './components/Button'; import SelectBox from './components/SelectBox'; import TextBox from './components/TextBox'; import './styles.scss'; import { postGenerateTextEndpoint } from './utils'; function App() { const [text, setText] = useState(""); const [model, setModel] = useState('gpt2'); const [generatedText, postGenerateText] = postGenerateTextEndpoint(); const generateText = () => { postGenerateText({ text, model, userId: 1 }); } return ( <div className='app-container'> <form noValidate autoComplete='off'> <h1>React GPT-2</h1> <SelectBox model={model} setModel={setModel} /> <TextBox text={text} setText={setText} /> <Button onClick={generateText} /> </form> {generatedText.pending && <div className='result pending'>Please wait</div>} {generatedText.complete && (generatedText.error ? <div className='result error'>Bad Request</div> : <div className='result valid'> {generatedText.data.result} </div>)} </div> ); } export default App; |
Vậy là đã xong. Các bạn hãy thử nghiệm và xem kết quả nhé. Chúc mọi người thành công!
Leave a Reply