CHATGPT o1-preview发布啦：两句话制作生成一个网站

nidongde2024-09-13 06:19:2718

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

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

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

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

这是保存出来的照片

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

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

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

<html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>形状照片墙生成器title>        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.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>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js">script>        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js">script>        <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();    });}