正在加载视频...

视频加载失败

Static PDF ➡️ interactive web app, all in one prompt! We used Gemini 3.7 Flash in Google AI Studio to transform a dense PDF annual report into a beautiful website. Using its native PDF understanding, the model easily extracted data, crunched the numbers, and generated delightful interactive UI in...

66,951 次观看 • 1 个月前 •via X (Twitter)

22 条评论

genevieveh@ 的头像
genevieveh@1 个月前

Wohoo this was so fun! For anyone else who'd like to try, here is the exact prompt I used in AI Studio: "I need you to create an extremely stylish website to present our annual report to our donors and community. you must build a single page, interactive experience to display this report. readers must be able to both see the quantitative data and explore the qualitative data. focus on the "so what?". the page title should be: "The Urban Hive Project: 2026 Annual Report". I want the report to be in light mode. use your image generator tool to add relevant images. Critical instructons: - you should first analyse the quantitative and qualitative data to pull out key insights. then, start the design. - you MUST identify 7-8 key sections on the website (vertically - no subpages). each section must be visible by itself and not overlap with other sections, with sticky scrolling, and each section should have one key insight or "so what", with 2 or 3 data points or supporting text points, maximum. - you must primarily use oversized typography to bring your point across. Display headings should be highly contrasted in size - very large and tight tracking. - you must make HEAVY use of animations, parallax scrolling effects, scroll hooks, and physics effects. - extreme border-radius on main containers. - glassmorphism: use background blur, semi-transparent white/gray backgrounds, and thin white borders or floating UI elements. Soft, diffuse drop shadows rather than harsh borders. Import whatever packages you need to make this website absolutely stunning. The goal is minimalist, letting the insights and typography do the talking!" Last few instruction bullets are very optional, but 3.7 Flash does especially well if you give it specific instructions for UI styles that you like (or attach screenshots and say something like "draw design inspiration from the attached layouts").

Google for Developers 的头像
Google for Developers1 个月前

@GoogleAIStudio Now this is a prompt. 👏 Thanks for sharing!

Google for Developers 的头像
Google for Developers1 个月前

Build your own:

Wes 的头像
Wes1 个月前

@GoogleAIStudio This impressive

AI Mastery Guide 的头像
AI Mastery Guide1 个月前

@GoogleAIStudio PDF to interactive app, super cool 🤩

ThuNoJoy | SayTXT for ADHD Reading 的头像
ThuNoJoy | SayTXT for ADHD Reading1 个月前

@GoogleAIStudio Dense PDFs becoming easier to enter is the real win here. Not every document needs more features; some just need a better first step.

Bharatron Technologies Pvt Ltd 的头像
Bharatron Technologies Pvt Ltd1 个月前

@GoogleAIStudio @googledevs Native PDF understanding + code generation in one prompt is the real unlock here — no more manual data extraction into a template. This is where AI moves from 'assistant' to 'builder'. #BharatronTech

Sadequr Rahman 的头像
Sadequr Rahman1 个月前

@GoogleAIStudio Awesome

Inflectiv AI ⧉ 的头像
Inflectiv AI ⧉1 个月前

@GoogleAIStudio 🔥🔥

HypnoDreamz 的头像
HypnoDreamz1 个月前

@GoogleAIStudio PDF magic ✨

Kostya | AI 的头像
Kostya | AI1 个月前

@GoogleAIStudio Gemini 3.7 Flash shows how LLMs can directly ingest PDFs and output ready‑to‑use web pages, streamlining report publishing without manual coding.

ThuNoJoy | SayTXT for ADHD Reading 的头像
ThuNoJoy | SayTXT for ADHD Reading1 个月前

@GoogleAIStudio Dense PDFs do not always need more features. Sometimes they just need a better first step into the content.

Tilo Lock 的头像
Tilo Lock1 个月前

@GoogleAIStudio YOUTUBE𒀀𒀁𒀂𒀃𒀄NEAL MOHAN𒀅𒀆𒀇𒀈𒀉𒀊𒀋𒀌𒀍𒀎𒀏𒀐𒀑𒀒𒀓𒀔𒀕𒀖PARTNERSHIP PROGRAM𒀗𒀘𒀙𒀚𒀛𒀜𒀝𒀞𒀟𒀠𒀡𒀢𒀣𒀤𒀥𒀦𒀧𒀨𒀩𒀪𒀫𒀬𒀭𒀮𒀯𒀰𒀱𒀲𒀳𒀴8000 HOURS𒀵

TNT 的头像
TNT1 个月前

@GoogleAIStudio Bees: “We made honey on rooftops.” Gemini 3.7: “Hold my prompt… here’s a full interactive website with parallax, glassmorphism, and an impact calculator.” Nature is healing… and also getting completely out-designed. 🐝📷✨

Forlais 的头像
Forlais1 个月前

@GoogleAIStudio Yeah, a dense annual report turning into something you can actually click through is a lovely demo. CNA is the architecture behind our upcoming EvaEsi models.

Mark 的头像
Mark1 个月前

@GoogleAIStudio AI usually creates the biggest step‑change when it can turn static data into live, interactive workflows automatically.

安叫兽|Bird🕊️ 🔶 BNB 的头像
安叫兽|Bird🕊️ 🔶 BNB1 个月前

@GoogleAIStudio 一次提示能跑起来很爽,细节校对估计还是少不了。

AMstudio 的头像
AMstudio1 个月前

@GoogleAIStudio Quel technique utiliser vous pour avoir ces effets fabuleux ? Parce que moi, il me fait galèrer.

我是老柯 的头像
我是老柯1 个月前

@GoogleAIStudio how can you do this. Why does the webpage I generated is so plastic

Sebastian Buzdugan 的头像
Sebastian Buzdugan1 个月前

@GoogleAIStudio how do you verify extracted numbers against source cells, since polished errors reach production fastest

Hammad Hamid 的头像
Hammad Hamid1 个月前

@GoogleAIStudio Google is amazing

Adel Bucetta 的头像
Adel Bucetta1 个月前

@GoogleAIStudio the real unlock is collapsing time between idea and shipped product. but what happens when ai accelerates the wrong output?

相关视频