我宣布GPT新模型o1-preview封神啦

最新推荐文章于 2024-09-13 11:51:21 发布

大可ai网页版

最新推荐文章于 2024-09-13 11:51:21 发布

阅读量347

点赞数 9

文章标签： gpt

本文链接：https://blog.csdn.net/2401_86965388/article/details/142189616

版权

刚才拿镜像站试用了一下让它做了一个心形照片墙生成网站，简单两句话调用，它还真给我弄出来了一个已经基本可以用的页面了。这个功能我之前让4o做该了十几轮对话都不太好用。这次新模型o1-preview的效果直接惊艳。

上图是第一轮对话，下面是第一轮对话给出的代码运行效果，已经可以勉强实现我需要的功能了。

然后我进行了第二轮，让它美化一下

这是第二轮让它优化一下后的页面效果，已经基本可以用了。

这是保存出来的照片

一共就简单两句对话，全程给出代码时间不超过两分钟，这秒杀大学生了。

这里贴上完整代码，运行有一个小问题，应该是墙的原因它引用的库国内网络加载不出来。

- index.html
- style.css
- script.js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>形状照片墙生成器</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">形状照片墙生成器</h1>
        <div class="card p-4">
            <div class="form-group">
                <label for="shape-select">选择形状：</label>
                <select id="shape-select" class="form-control">
                    <option value="heart">❤️ 心形</option>
                    <option value="circle">⭕ 圆形</option>
                    <option value="star">⭐ 星形</option>
                    <!-- 可添加更多形状 -->
                </select>
            </div>
            <div class="form-group">
                <label for="image-input">上传照片：</label>
                <input type="file" id="image-input" accept="image/*" multiple class="form-control-file">
            </div>
            <button id="generate-btn" class="btn btn-primary btn-block">生成照片墙</button>
            <button id="save-btn" class="btn btn-success btn-block mt-2" disabled>保存照片墙</button>
        </div>
        <div id="photo-wall-container" class="mt-4">
            <div id="photo-wall" class="position-relative mx-auto">
                <!-- 照片墙将生成在这里 -->
            </div>
        </div>
    </div>

    <!-- 引入jQuery和Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入Bootstrap JS（可选） -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- 引入html2canvas库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <!-- 自定义JS -->
    <script src="script.js"></script>
</body>
</html>

body {
    background-color: #f8f9fa;
}

h1 {
    color: #343a40;
}

.card {
    background-color: #ffffff;
    border: none;
    border-radius: 10px;
}

#photo-wall-container {
    max-width: 100%;
    overflow: auto;
}

#photo-wall {
    width: 800px;
    height: 600px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    position: relative;
}

#photo-wall img {
    position: absolute;
    width: 50px;
    height: 50px;
    object-fit: cover;
}

@media (max-width: 767px) {
    #photo-wall {
        width: 100%;
        height: 400px;
    }
}

// script.js

document.getElementById('generate-btn').addEventListener('click', generatePhotoWall);
document.getElementById('save-btn').addEventListener('click', savePhotoWall);

function generatePhotoWall() {
    const files = document.getElementById('image-input').files;
    const shape = document.getElementById('shape-select').value;
    const photoWall = document.getElementById('photo-wall');

    if (files.length === 0) {
        alert('请先上传照片');
        return;
    }

    // 清空照片墙
    photoWall.innerHTML = '';

    // 获取照片墙尺寸
    const wallWidth = photoWall.clientWidth;
    const wallHeight = photoWall.clientHeight;

    // 生成形状坐标点
    let points = [];
    switch (shape) {
        case 'heart':
            points = generateHeartPoints(files.length, wallWidth, wallHeight);
            break;
        case 'circle':
            points = generateCirclePoints(files.length, wallWidth, wallHeight);
            break;
        case 'star':
            points = generateStarPoints(files.length, wallWidth, wallHeight);
            break;
        // 可添加更多形状
    }

    // 读取并展示照片
    let loadedImages = 0;
    const images = [];

    for (let i = 0; i < files.length; i++) {
        const img = document.createElement('img');
        img.style.left = points[i % points.length].x + 'px';
        img.style.top = points[i % points.length].y + 'px';

        const reader = new FileReader();
        reader.onload = function(e) {
            img.src = e.target.result;
            images.push(img);
            loadedImages++;

            if (loadedImages === files.length) {
                // 所有图片加载完成后添加到DOM
                images.forEach(image => {
                    photoWall.appendChild(image);
                });
                // 启用保存按钮
                document.getElementById('save-btn').disabled = false;
            }
        }
        reader.readAsDataURL(files[i]);
    }
}

// 心形坐标生成函数
function generateHeartPoints(numPoints, width, height) {
    const points = [];
    const scale = Math.min(width, height) / 40;
    const offsetX = width / 2;
    const offsetY = height / 2.2;

    for (let i = 0; i < numPoints; i++) {
        const t = Math.PI - 2 * Math.PI * i / numPoints;
        const x = 16 * Math.pow(Math.sin(t), 3);
        const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
        points.push({
            x: offsetX + x * scale - 25,
            y: offsetY - y * scale - 25
        });
    }
    return points;
}

// 圆形坐标生成函数
function generateCirclePoints(numPoints, width, height) {
    const points = [];
    const radius = Math.min(width, height) / 2.5;
    const centerX = width / 2;
    const centerY = height / 2;

    for (let i = 0; i < numPoints; i++) {
        const angle = (2 * Math.PI * i) / numPoints;
        points.push({
            x: centerX + radius * Math.cos(angle) - 25,
            y: centerY + radius * Math.sin(angle) - 25
        });
    }
    return points;
}

// 星形坐标生成函数
function generateStarPoints(numPoints, width, height) {
    const points = [];
    const outerRadius = Math.min(width, height) / 2.5;
    const innerRadius = outerRadius / 2.5;
    const centerX = width / 2;
    const centerY = height / 2;

    for (let i = 0; i < numPoints * 2; i++) {
        const angle = (Math.PI * i) / numPoints;
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        points.push({
            x: centerX + radius * Math.cos(angle) - 25,
            y: centerY + radius * Math.sin(angle) - 25
        });
    }
    return points;
}

// 保存照片墙为图片
function savePhotoWall() {
    const photoWall = document.getElementById('photo-wall');
    html2canvas(photoWall, { backgroundColor: '#ffffff' }).then(canvas => {
        const link = document.createElement('a');
        link.download = 'photo_wall.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
    });
}