背景故事

音乐能让我6个月大的女儿笑逐颜开,特别是Raising Children Network上的婴儿卡拉OK。但有一个问题:即使这些视频在播放列表中,每个视频都需要手动点击播放。所以我妻子让我找一个真正免手动的解决方案,这样我们就能不间断地享受音乐了。

作为一名机器学习工程师,解决方案中必须要有AI。所以我很快就排除了下载所有视频并创建YouTube播放列表的想法,这需要太多人工操作了。我还发现有一个婴儿卡拉OK的移动应用,但歌曲集不同且少得多,所以那也不是一个好选择。

我最终得出结论,需要构建一个类似Raising Children Network的网页,但带有自动播放功能。然而,我不是网页开发者,一生中写过的HTML代码可能不到100行。所以,很自然地,我求助于ChatGPT。

成果展示

这是我构建的页面,这是ChatGPT生成的代码——全程没有我写一行代码。一旦你播放第一个视频,其余的将按顺序自动播放。我还完全掌控了歌曲的选择和顺序(要知道,我女儿对音乐有她自己的品味)。

<style>
  #video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Ensures it takes up space before the footer */
    margin-bottom: 20px; /* Adds space below the video */
    z-index: 1; /* Ensures video does not overlap */
  }
</style>

<div id="video-container">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
    var videoIDs = [
        "287009749", // ABC
        "287009913", // Baba black ship
        "287362325", // Native animal
        "287353905", // Wheel on the bus
        "287353768", // Twikle little star
        "287353269", // Rock a bye baby
        "287353131", // Open shut them
        // "287352861", // Old Macdonald
        "287012695", // Kookaburra
        "287012197", // Incey Wincey Spider
        "287007315", // Inanay
        "287363391", // Row your boat Karaoke
        "287011508", // Heads and shoulder
        "287011293", // If you happy you know it
        "287010859", // G'day
        //"287010728", // Little green frog
        //"287010560", // 5 little duck
        //"287010317", // Children of dreaming
        "287009595", // One two three four five
        //"287009412", // Wheel on bus karaoke
        "287009236", // Twinkle karaoke
        //"287008692", // Rock a bye baby kara
        "287008561"  // Open shut them kara
    ];

        var currentVideoIndex = 0;

        // Create and append the iframe to the container
        var iframe = document.createElement('iframe');
        iframe.width = "640";
        iframe.height = "360";
        iframe.frameBorder = "0";
        iframe.allow = "autoplay; fullscreen";
        iframe.allowFullscreen = true;
        iframe.src = "https://player.vimeo.com/video/" + videoIDs[currentVideoIndex];
        document.getElementById('video-container').appendChild(iframe);

        var player = new Vimeo.Player(iframe);

        function playNextVideo() {
            currentVideoIndex++;
            if (currentVideoIndex < videoIDs.length) {
                player.loadVideo(videoIDs[currentVideoIndex]).then(function() {
                    player.play();
                }).catch(function(error) {
                    console.error('Error loading video:', error);
                });
            } else {
                console.log('All videos have been played.');
            }
        }

        player.on('ended', function() {
            playNextVideo();
        });

        // Start playing the first video
        player.play();
    });
    </script>
</div>

开发历程

这个过程其实挺有趣的。我复制了Raising Children Network页面的全部HTML,告诉ChatGPT我想要视频自动播放。经过几次尝试,它使用JavaScript实现了。然后我截取了它刚刚构建的页面截图,发回给ChatGPT,让它修复样式和格式。最终,我们得到了最终方案。再次强调,这是页面,现在我可以打开页面,免手动地和女儿一起享受音乐了。如果你也遇到婴儿卡拉OK的同样问题,欢迎使用。

心得体会

这就是生成式AI如何重塑现状。

你不需要成为开发者或机器学习工程师,就能用ChatGPT把你的想法变成原型。这完全符合精益创业的方法:快速原型、快速市场测试、快速反馈和快速迭代。一旦你找到一个成功的想法,就把它纳入内部,雇佣开发者来完善和构建——很可能也会借助ChatGPT的帮助。

那么,你的成功想法是什么呢?