您还未登录

登录体验更多功能

文章未分类

用thinkphp6对接openai实现AI绘画功能

创新博客作者 2023年6月12日 0 评论 992 阅读

首页 › 未分类 ›正文

1,在composer.json文件中，添加OpenAI SDK的依赖项：

"require": {
    "php": "^7.2",
    "topthink/think": "^6.0",
    "openai/sdk": "^0.2.0"
}

2,在ThinkPHP6中创建一个控制器，引入OpenAI SDK，并编写代码实现AI绘画功能。
下面直接上代码

<?php

namespace appcontroller;

use OpenAIApiGPT3;
use thinkController;

class AIController extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }

    public function generate()
    {
        $prompt = input('prompt');

        $gpt3 = new GPT3('API_KEY');

        $response = $gpt3->completion([
            'prompt' => $prompt,
            'max_tokens' => 1024,
            'temperature' => 0.5,
            'n' => 1,
            'stop' => ['nn'],
        ]);

        $image_url = $response->choices[0]->text;

        return json(['status' => 'success', 'image_url' => $image_url]);
    }
}

接下来我们使用Bootstrap框架创建一个表单，让用户输入绘画的提示内容，并通过AJAX请求将数据发送给后端控制器。
上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AI绘画</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form id="form">
                    <div class="form-group">
                        <label for="prompt">请输入绘画的提示内容：</label>
                        <textarea class="form-control" id="prompt" rows="3"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">生成</button>
                </form>
            </div>
        </div>
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <div id="image"></div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#form').submit(function(e) {
                e.preventDefault();

                var prompt = $('#prompt').val();

                $.ajax({
                    url: '/AI/generate',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        prompt: prompt,
                    },
                    success: function(data) {
                        if (data.status == 'success') {
                            $('#image').html('<img src="' + data.image_url + '">');
                        } else {
                            alert('生成失败，请重试！');
                        }
                    },
                    error: function() {
                        alert('生成失败，请重试！');
                    }
                });
            });
        });
    </script>
</body>
</html>

接下来就是见证奇迹的时刻