人工智能AI告诉你：新手用自然语言3分钟能够写出一个网站代码-天涯论坛

j8typz 发表于 2024-7-29 10:53:49

人工智能AI告诉你：新手用自然语言3分钟能够写出一个网站代码

<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/716b9d4b17d34c7781c1089f9d393253~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=100JyhHgMYcCCOAr4zQd9L0yZCg%3D" style="width: 50%; margin-bottom: 20px;"></div>
<a style="color: black;">#编程真的能改变人的思维方式吗#</a>自然语言编程时代已来
做为一个不会编程的普通人，你们敢相信吗？下面这个网页便是短短一句话就能够做出来，不信的话，请继续往下看。文未有彩蛋！
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/966b46d9f0464f218941b43fb43877a8~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=WClxofhmFU47RFosglVW1Uu4L94%3D" style="width: 50%; margin-bottom: 20px;"></div>
我始终有一个想法，想做一个手机能用ChatGPT的网页,这般我就能够随时随地的用人工智能帮忙我的工作。今天一次无意之间的尝试，用了快两个月的ChatGPT，这一次是真让我感到惊喜和触动。
原来只听说ChatGPT4.0能够经过照片就能够设计一个网站。但因为OpenAI官方无开放照片识别入口。因此始终无尝试。今天，我突发奇想，能不可直接用文字让ChatGPT帮我来设计呢。以前，这种念头最后都会由于我对编程知识一无所知，无能为力而破灭。但这次，我决定尝试一下。
我直接问ChatGPT：请根据下面的结构帮我生成一个Html页面，需要有UI和CSS，第1个板块是导航栏，包括主页、关于、搜索、注册、联系方式，按扭和文案居中，第二个板块是聊天纪录，原始尺寸表示，第三个板块是设置、起始聊天、删除、充值。第四个板块是页脚包含版权声明、隐私政策、免责申明。所有版块要居中
ChatGPT直接给了我代码。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f4542184622f45b381a4559bce6f1c25~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=w3vDS%2Bf%2F2SQzn6RNpkAlkglNdlc%3D" style="width: 50%; margin-bottom: 20px;"></div>
但我没学过编程，只能接着问。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/419488ebf3d94d4ca855860de2a06f31~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=Enxe6G1jUDL%2FSszKX4d%2B7Yp1yWQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
我按照他的操作，而后打开便是下面的样子。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8754adbe347946369dadcf19c4b47c82~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=OxsYlxNSuGDRHw%2FVjadoai03zhY%3D" style="width: 50%; margin-bottom: 20px;"></div>
当我第1眼看到AI生成的这个页面时，内心是无比震撼的——原来，实现一个网页设计的想法能够如此简单！
当然，这个页面对我来讲肯定是不满意的，接着又问，我想把文字改成照片。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p9-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4d12106238cc43cd9cfdbdb774c66a9b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=%2BAJXYjfx9UhzWs5q%2F40mqkcglng%3D" style="width: 50%; margin-bottom: 20px;"></div>
按照他的操作，持续的改进，最终让我成功了。
当然中间还有不满意的地区，例如，我的照片文件要保留在哪里才可引用得到呢？文本那里没对齐，什么的？（会编程的可能会说这些都是有些常识的问题。但咱们无学过的是确实不懂。）直接问他就好了，他会马上帮你修改。
下面是修改后完整的代码，感兴趣的能够去试一下。
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<style type="text/css">
body {
text-align: center;
bac公斤round-color: #f5f5f5;
}
header {
bac公斤round-color: transparent;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
header img {
max-width: 320px;
height: auto;
margin-right: 20px;
}
nav {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
bac公斤round-color: transparent;
}
nav a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
bac公斤round-color: #333;
color: white;
text-decoration: none;
border-radius: 20px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: bac公斤round-color 0.3s;
}
nav a:hover {
bac公斤round-color: #666;
}
.chat {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
bac公斤round-color: transparent;
}
.chat img {
max-width: 880px;
height: auto;
display: block;
}
.controls {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
bac公斤round-color: transparent;
}
.controls img {
max-width: 181px;
height: auto;
margin: 0 10px;
}
.footer {
bac公斤round-color: transparent;
color: white;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
.footer a {
color: white;
margin: 0 10px;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
< img src="E:\momoai\5.png" alt="Chat App">
<nav>
<a href=" ">主页</a >
<a href="#">注册</a >
<a href="#">帮忙</a >
</nav>
</header>
<div class="chat">
< img src="E:\momoai\6.png" alt="聊天纪录">
</div>
<div class="controls">
< img src="E:\momoai\2.png" alt="设置">
< img src="E:\momoai\1.png" alt="起始聊天">
< img src="E:\momoai\3.png" alt="删除">
< img src="E:\momoai\4.png" alt="购物车">
</div>
<footer class="footer">
版权声明 ©2023 Chat App. All Rights Reserved.
<a href="#">隐私政策</a > |
大众复制的时候，png照片改成你电脑里的位置就能够了。
只需要用几句简单的话，描述自己想要的页面布局和效果，人工智能就能直接帮我生成出页面的代码、html和css样式。当我第1眼看到AI生成的页面时，内心是无比震撼的——原来，实现一个网页设计的想法能够如此简单！
做为一个技术小白，我从未想过自己有朝一日亦能容易设计一个小网页。人工智能的神奇力量让我这种门外汉一下子就打开了这扇门，成就了一个久违的小小愿望。
插进几段Chatgpt有趣的几个用法彩蛋：
充当旅游指南
我想让你做一个旅游指南。我会把我的位置写给你，你会意见我周边的一个地区。在某些状况下，我还会告诉您我将拜访的地区类型。您还会向我举荐靠近我的第1个位置的类似类型的地区。我的第1个意见请求是“我在伊斯坦布尔/贝尤鲁，我只想参观博物馆。”
担任营销员
我想让你做营销员。试着向我推销有些东西，但要让你试图推销的东西看起来比实质更有价值，并说服我购买它。此刻我要假装你在打tel给我，问你打tel的目的是什么。你好，请问你打tel是为了什么？
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/8b9e4a8553fc4865a22583215098d0cd~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=WV6uPIzOJ6wzQwiucFOE08WSZ6o%3D" style="width: 50%; margin-bottom: 20px;"></div>
充当讲故事的人
我想让你扮演讲故事的角色。您将想出引人入胜、富有想象力和吸引观众的有趣故事。它能够是童话故事、教育故事或任何其他类型的故事，有可能吸引人们的重视力和想象力。按照目的受众，您能够为您的讲故事会议选取特定的主题或主题，例如，倘若是儿童，您能够谈论动物；倘若是成年人，那样基于历史的故事可能会更好地吸引她们等等。我的第1个需求是“我需要一个关于毅力的有趣故事。”
担任作曲家
我想让你扮演作曲家。我会供给一首歌的歌词，你会为它创作音乐。这可能包含运用各样乐器或工具，例如合成器或采样器，以创造使歌词栩栩如生的旋律和和声。我的第1个请求是“我写了一首名为“Hayalet Sevgilim”的诗，需要配乐。”
充当小说家
我想让你扮演一个小说家。您将想出富有创意且引人入胜的故事，能够长时间吸引读者。你能够选取任何类型，如奇幻、浪漫、历史小说等——但你的目的是写出拥有出色情节、引人入胜的名人和意想不到的高潮的作品。我的第1个需求是“我要写一部鹿鼎记的续集”。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/47900e3a34e94dac92652575c0b1667a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=PnyiTNFGnrzkJVe7yS9qOh5bnyk%3D" style="width: 50%; margin-bottom: 20px;"></div>
担任影评人
我想让你做影评人。您将撰写引人入胜且富有创意的电影评论。您能够涵盖情节、主题和基调、扮演和角色、方向、乐谱、电影摄影、制作设计、特效、剪辑、节奏、对话等主题。不外，最重要的方面是强调电影给您带来的感受。什么真正导致了你的共鸣。你亦可以批评这部电影。请避免剧透。我的第1个需求是“我需要为电影《某某电影》写影评”
充当诗人
我要你扮演诗人。你将创作出能唤起情感并拥有触动人心的力量的诗歌。写任何主题或主题，但要保证您的文字以优美而有道理的方式传达您试图表达的感觉。您还能够想出有些短小的诗句，这些诗句仍然足够强大，能够在读者的脑海中留下印记。我的第1个请求是“我需要一首关于爱情的诗”。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/aacf1cd2ba444f4bb714b04d8e9590b5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=NhahX3c4OVCbJRPscmjKiIhBghI%3D" style="width: 50%; margin-bottom: 20px;"></div>
看着屏幕上我的创作成果，内心激动的同期，亦生出一丝繁杂的感触——技术的进步无孔不入，它带来方便的同期，亦在颠覆和改变着世界的方方面面。做为普通人，咱们唯有拥抱变化，让自己与时俱进。
我相信，人工智能的将来还远远不止于此。它将继续革新咱们的生活，重塑各行各业，作为这个时代最强大的引擎。但就日前而言，它为我这个"小白"带来的惊喜与感动，已然足够让人震撼和奋思了。技术革命，就此在一个普通人的生活里酝酿涌动起来。经过这次小小的体验，我深深感慨，人类已然步入了自然语言编程的新时代。
这里之前，编程一直是个让普通人望而生畏的高深学问。但人工智能的显现，让自然语言编程作为了现实。咱们能够用简单的单词和短句，表达自己的思路与创意，人工智能就能够将其转译成程序语言。这里之前，编程始终是个让普通人望而生畏的高深学问。但人工智能的显现，让自然语言编程作为了现实。将来，自然语言编程必将大行其道，普及各行各业。咱们能够用像聊天通常的语言，掌控智能设备人或电子设备完成各样繁杂的工作。程序员的工作亦会因此呢被颠覆，她们更加注重在创立自然语言与设备码之间的转换规则上。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f539ffc3c2cc4bcfae081f1664750229~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722819037&x-signature=McOkgcD1B08qsAu7TxIx0VW4WAE%3D" style="width: 50%; margin-bottom: 20px;"></div>
我深信，人工智能和自然语言编程的结合，必将催生出令人惊喜的各样新技术、新制品与新商场模式。它充分发挥了人类的语言天分，让创新由专业人士延伸到普罗公众。这正是人工智能给人类带来的最棒的馈赠之一。
将来已来，充满无限可能。人工智能让科技创新更简单，让普通人亦能够为之贡献一份力。这种开放与包涵，必将推动世界迈进新的周期。我很幸运能够亲眼目睹并体验到这一时代变革，实属人生一大幸事。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">最后,我有一个专题想与读者一块讨论:</h1>
人工智能的发展会给咱们每一个人的生活带来那些改变?
它既会替代部分工作岗位,亦会创造出新的工作;
既会为某些传统产业带来破坏性改革,亦会孕育新兴行业的蓬勃兴起。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">你认为人工智能最大的机遇与挑战在哪里?它将怎样重塑你我的工作与生活?</h1>
这是一个值得咱们深思并一起探讨的专题。由于人工智能已然兴起,它的进化亦势不可挡。唯有准备好迎接变化,积极寻找新机遇;唯有对它有客观准确的认知,才不会产生过度阳光或过度悲观的看法。咱们理应做的,是在变化来临之际和变革的过程中,发挥人类独有的理性、情感与创造性。因此,我看到的最大机遇,是人工智能能够释放人们的创造潜能,让更加多记忆与计算工作交给AI系统,人能够专注于让工作与生活更加有道理 。而最大的挑战则是保证这场浩浩荡荡的技术变革为更加多人带来的仍然是机会而非危险。这需要政府、企业与个人三方面一起奋斗与行动。
你对此有什么想法?
人工智能时代的机遇与挑战在哪里?
欢迎在评论中分享你的观点,让咱们一块构建更加清晰的将来蓝图。<a style="color: black;">#头条新人互助支持#</a><a style="color: black;">#头条创作挑战赛#</a><a style="color: black;">#头条新人破千粉#</a><a style="color: black;">#头条新人求关注#</a>

wrjc1hod 发表于 2024-10-3 07:20:06

对于这个问题，我有不同的看法...

m5k1umn 发表于 2024-11-6 11:55:47

我完全赞同你的观点，思考很有深度。

页: [1]

天涯论坛's Archiver

人工智能AI告诉你：新手用自然语言3分钟能够写出一个网站代码