add examples

app.py

@@ -157,7 +157,7 @@ API_NAME = 'tts'
 
 head = f'''
 <script>
-    document.addEventListener('load', () => {{
+    document.addEventListener('DOMContentLoaded', () => {{
         console.log('DOM content loaded');
         if (!localStorage.getItem('debug') && !window.location.href.match(/debug=1/)) {{
             console.log('Attaching frontend app');

front/src/components/ScriptMaker.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { CONFIG } from '../config';
 import { getPromptGeneratePodcastScript } from '../utils/prompts';
 import { getSSEStreamAsync } from '../utils/utils';
+import { EXAMPLES } from '../examples';
 
 interface SplitContent {
   thought: string;
@@ -93,6 +94,29 @@ export const ScriptMaker = ({
     <div className="card bg-base-100 w-full shadow-xl">
       <div className="card-body">
         <h2 className="card-title">Step 1: Input information</h2>
+
+        <select
+          className="select select-bordered w-full"
+          disabled={isGenerating || busy}
+          onChange={(e) => {
+            const idx = parseInt(e.target.value);
+            const ex = EXAMPLES[idx];
+            if (ex) {
+              setInput(ex.input);
+              setNote(ex.note);
+            }
+          }}
+        >
+          <option selected disabled value={-1}>
+            Try one of these examples!!
+          </option>
+          {EXAMPLES.map((example, index) => (
+            <option key={index} value={index}>
+              {example.name}
+            </option>
+          ))}
+        </select>
+
         <textarea
           className="textarea textarea-bordered w-full h-72 p-2"
           placeholder="Type your input information here (an article, a document, etc)..."

front/src/examples.ts

@@ -0,0 +1,177 @@
+export const EXAMPLES = [
+  {
+    name: 'Example 1: History and facts about croissants',
+    note: 'Be informative, but keep it engaging',
+    input: `
+Where are croissants from?
+
+There are several stories that claim to explain the origins of how croissants came to be. Whilst experts have done their best to debunk most of these apochryphal tales, one thing that the historical evidence shows more definitively is that the story of the croissant begins in Austria, not in France.
+
+It is widely understood that the croissant of today is a descendent of the 'kipferl' (or kipfel) - an Austrian, crescent-shaped pastry that resembles a thinner, denser croissant made with a generous amount of butter and often served topped with sugar and almonds.
+
+## From Vienna To Paris
+
+Regardless of the kipferl’s origin, how then did this Viennese delicacy become France’s most beloved patisserie item? As you may now have come to expect, there are a number of tall tales.
+
+One legend attributes the kipferl’s introduction to Paris, having come from Austrian-born Marie Antoinette bringing the delicacy over when she married King Louis XVI in 1770. This is yet another myth!
+
+The real birth of the croissant is more accurately attributed to August Zang, an Austrian entrepreneur who opened a Viennese-style boulangerie in Paris in 1838.
+
+It was here, known locally as simply “Zang’s”, that Parisians first encountered what would become the croissant. Though Zang’s was only open for two years, his unique Vienneserie products and marketing acumen (using newspaper advertising and lavish window displays to entice customers) made his kipferl a sensation; so much so that by the time Zang’s closed in 1840, there were already a dozen imitators baking his beloved crescent-shaped delicacy. 
+
+It wasn’t long before these pastries were firmly cemented in Parisian culture, with the French word ‘croissant’ (meaning ‘crescent’) replacing the original Austrian name.
+
+## Today, croissants have conquered the world
+
+Undoubtedly, August Zang would never have predicted the global impact his Parisian-Viennese invention would have. Fast forward from 1838 to today, and the popularity of croissants worldwide is truly staggering.
+
+A recent study valued the size of the global croissant market at 6663.1 million USD, with a projected growth expected to reach 8574.66 million USD by 2027¹.
+
+Spanning over an 800-year period from 13th Century Austria through to global significance in the modern day, the story of the croissant is truly a remarkable one.  Even more remarkably is that, though we’ve been enjoying these incredibly popular and palatable pastries for hundreds of years, there are still new and exciting takes on the recipe being created.
+
+# Facts
+
+
+## Marie Antoinette did not popularise the croissant
+
+Legend credits the French queen Marie Antoinette—homesick for a taste of her native Vienna—with introducing the kipferl, and thus the croissant, to France. But Jim Chevallier mentioned above sees no evidence to support this notion.
+
+## A relatively recent recipe
+
+A croissant recipe showing the use of yeasted puff pastry dough instead of brioche that was used previously first appeared in 1905 in the book Colombie’s “NOUVELLE ENCYCLOPEDIE CULINAIRE. Cuisine et Pâtisserie Bourgeoises conserves de ménage.”
+
+## A breakfast staple
+
+The croissant was already a breakfast staple by the late 1860s and Charles Dickens referred to the “dainty croissant on the boudoir table” in All the Year Round in 1872.
+
+Croissant history
+
+## Why some croissants are curved and others are straight
+
+Croissants that are straight are those made with butter (croissants au beurre) and the curved ones are made with margarine (croissants ordinaires).
+
+Croissant au beurre croissant ordinaire
+
+## Lamination
+
+Those crispy, airy, crunchy layers we associate with the croissant are thanks to a process called lamination. What is it? The dough is folded several times with alternating layers of fat – butter or margarine, before then being rolled and cut into triangles.
+    `.trim(),
+  },
+  {
+    name: 'Example 2: Intro to Hugging Face Transformers (from HF blog)',
+    note: 'Make it a bit fun and engaging',
+    input: `
+Welcome to "A Total Noob’s Introduction to Hugging Face Transformers," a guide designed specifically for those looking to understand the bare basics of using open-source ML. Our goal is to demystify what Hugging Face Transformers is and how it works, not to turn you into a machine learning practitioner, but to enable better understanding of and collaboration with those who are. That being said, the best way to learn is by doing, so we'll walk through a simple worked example of running Microsoft’s Phi-2 LLM in a notebook on a Hugging Face space.
+
+You might wonder, with the abundance of tutorials on Hugging Face already available, why create another? The answer lies in accessibility: most existing resources assume some technical background, including Python proficiency, which can prevent non-technical individuals from grasping ML fundamentals. As someone who came from the business side of AI, I recognize that the learning curve presents a barrier and wanted to offer a more approachable path for like-minded learners.
+
+Therefore, this guide is tailored for a non-technical audience keen to better understand open-source machine learning without having to learn Python from scratch. We assume no prior knowledge and will explain concepts from the ground up to ensure clarity. If you're an engineer, you’ll find this guide a bit basic, but for beginners, it's an ideal starting point.
+
+Let’s get stuck in… but first some context.
+What is Hugging Face Transformers?
+
+Hugging Face Transformers is an open-source Python library that provides access to thousands of pre-trained Transformers models for natural language processing (NLP), computer vision, audio tasks, and more. It simplifies the process of implementing Transformer models by abstracting away the complexity of training or deploying models in lower level ML frameworks like PyTorch, TensorFlow and JAX.
+What is a library?
+
+A library is just a collection of reusable pieces of code that can be integrated into projects to implement functionality more efficiently without the need to write your own code from scratch.
+
+Notably, the Transformers library provides re-usable code for implementing models in common frameworks like PyTorch, TensorFlow and JAX. This re-usable code can be accessed by calling upon functions (also known as methods) within the library.
+What is the Hugging Face Hub?
+
+The Hugging Face Hub is a collaboration platform that hosts a huge collection of open-source models and datasets for machine learning, think of it being like Github for ML. The hub facilitates sharing and collaborating by making it easy for you to discover, learn, and interact with useful ML assets from the open-source community. The hub integrates with, and is used in conjunction with the Transformers library, as models deployed using the Transformers library are downloaded from the hub.
+What are Hugging Face Spaces?
+
+Spaces from Hugging Face is a service available on the Hugging Face Hub that provides an easy to use GUI for building and deploying web hosted ML demos and apps. The service allows you to quickly build ML demos, upload your own apps to be hosted, or even select a number of pre-configured ML applications to deploy instantly.
+
+In the tutorial we’ll be deploying one of the pre-configured ML applications, a JupyterLab notebook, by selecting the corresponding docker container.
+What is a notebook?
+
+Notebooks are interactive applications that allow you to write and share live executable code interwoven with complementary narrative text. Notebooks are especially useful for Data Scientists and Machine Learning Engineers as they allow you to experiment with code in realtime and easily review and share the results.
+
+Why do I need to select a GPU Space Hardware?
+
+By default, our Space comes with a complimentary CPU, which is fine for some applications. However, the many computations required by LLMs benefit significantly from being run in parallel to improve speed, which is something GPUs are great at.
+
+It's also important to choose a GPU with enough memory to store the model and providing spare working memory. In our case, an A10G Small with 24GB is enough for Phi-2. 
+
+
+If we are using Transformers, why do we need Pytorch too?
+
+Hugging Face is a library that is built on top of other frameworks like Pytorch, Tensorflow and JAX. In this case we are using Transformers with Pytorch and so need to install it to access it’s functionality.
+
+Why do I need to import the Class again after installing Transformers?
+
+Although Transformers is already installed, the specific Classes within Transformers are not automatically available for use in your environment. Python requires us to explicitly import individual Classes as it helps avoid naming conflicts and ensures that only the necessary parts of a library are loaded into your current working context.
+
+ What is a tokenizer?
+
+A tokenizer is a tool that splits sentences into smaller pieces of text (tokens) and assigns each token a numeric value called an input id. This is needed because our model only understands numbers, so we first must convert (a.k.a encode) the text into a format the model can understand. Each model has it’s own tokenizer vocabulary, it’s important to use the same tokenizer that the model was trained on or it will misinterpret the text.
+
+Why do I need to decode?
+
+Models only understand numbers, so when we provided our input_ids as vectors it returned an output in the same format. To return those outputs to text we need to reverse the initial encoding we did using the tokenizer.
+Why does the output read like a story?
+
+Remember that Phi-2 is a base model that hasn't been instruction tuned for conversational uses, as such it's effectively a massive auto-complete model. Based on your input it is predicting what it thinks is most likely to come next based on all the web pages, books and other content it has seen previously.
+
+Congratulations, you've run inference on your very first LLM!
+
+I hope that working through this example helped you to better understand the world of open-source ML. If you want to continue your ML learning journey, I recommend the recent Hugging Face course we released in partnership with DeepLearning AI.
+`,
+  },
+  {
+    name: 'Example 3: What is DeepSeek (from CNN)',
+    note: 'Pay more attention to the fact that R1 is open-source',
+    input: `
+# What is DeepSeek, the Chinese AI startup that shook the tech world? 
+
+(From CNN) - A surprisingly efficient and powerful Chinese AI model has taken the technology industry by storm. It’s called DeepSeek R1, and it’s rattling nerves on Wall Street.
+
+The new AI model was developed by DeepSeek, a startup that was born just a year ago and has somehow managed a breakthrough that famed tech investor Marc Andreessen has called “AI’s Sputnik moment”: R1 can nearly match the capabilities of its far more famous rivals, including OpenAI’s GPT-4, Meta’s Llama and Google’s Gemini — but at a fraction of the cost.
+
+The company said it had spent just $5.6 million powering its base AI model, compared with the hundreds of millions, if not billions of dollars US companies spend on their AI technologies. That’s even more shocking when considering that the United States has worked for years to restrict the supply of high-power AI chips to China, citing national security concerns. That means DeepSeek was supposedly able to achieve its low-cost model on relatively under-powered AI chips.
+What is DeepSeek?
+
+The company, founded in late 2023 by Chinese hedge fund manager Liang Wenfeng, is one of scores of startups that have popped up in recent years seeking big investment to ride the massive AI wave that has taken the tech industry to new heights.
+
+Liang has become the Sam Altman of China — an evangelist for AI technology and investment in new research. His hedge fund, High-Flyer, focuses on AI development.
+
+Like other AI startups, including Anthropic and Perplexity, DeepSeek released various competitive AI models over the past year that have captured some industry attention. Its V3 model raised some awareness about the company, although its content restrictions around sensitive topics about the Chinese government and its leadership sparked doubts about its viability as an industry competitor, the Wall Street Journal reported.
+
+But R1, which came out of nowhere when it was revealed late last year, launched last week and gained significant attention this week when the company revealed to the Journal its shockingly low cost of operation. And it is open-source, which means other companies can test and build upon the model to improve it.
+
+The DeepSeek app has surged on the app store charts, surpassing ChatGPT Monday, and it has been downloaded nearly 2 million times.
+Why is DeepSeek such a big deal?
+
+AI is a power-hungry and cost-intensive technology — so much so that America’s most powerful tech leaders are buying up nuclear power companies to provide the necessary electricity for their AI models.
+
+Meta last week said it would spend upward of $65 billion this year on AI development. Sam Altman, CEO of OpenAI, last year said the AI industry would need trillions of dollars in investment to support the development of high-in-demand chips needed to power the electricity-hungry data centers that run the sector’s complex models.
+
+So the notion that similar capabilities as America’s most powerful AI models can be achieved for such a small fraction of the cost — and on less capable chips — represents a sea change in the industry’s understanding of how much investment is needed in AI. The technology has many skeptics and opponents, but its advocates promise a bright future: AI will advance the global economy into a new era, they argue, making work more efficient and opening up new capabilities across multiple industries that will pave the way for new research and developments.
+
+Andreessen, a Trump supporter and co-founder of Silicon Valley venture capital firm Andreessen Horowitz, called DeepSeek “one of the most amazing and impressive breakthroughs I’ve ever seen,” in a post on X.
+
+If that potentially world-changing power can be achieved at a significantly reduced cost, it opens up new possibilities — and threats — to the planet.
+What does this mean for America?
+
+The United States thought it could sanction its way to dominance in a key technology it believes will help bolster its national security. Just a week before leaving office, former President Joe Biden doubled down on export restrictions on AI computer chips to prevent rivals like China from accessing the advanced technology.
+
+But DeepSeek has called into question that notion, and threatened the aura of invincibility surrounding America’s technology industry. America may have bought itself time with restrictions on chip exports, but its AI lead just shrank dramatically despite those actions.
+
+DeepSeek may show that turning off access to a key technology doesn’t necessarily mean the United States will win. That’s an important message to President Donald Trump as he pursues his isolationist “America First” policy.
+
+Wall Street was alarmed by the development. US stocks were set for a steep selloff Monday morning. Nvidia (NVDA), the leading supplier of AI chips, whose stock more than doubled in each of the past two years, fell 12% in premarket trading. Meta (META) and Alphabet (GOOGL), Google’s parent company, were also down sharply, as were Marvell, Broadcom, Palantir, Oracle and many other tech giants.
+Are we really sure this is a big deal?
+
+The industry is taking the company at its word that the cost was so low. No one is really disputing it, but the market freak-out hinges on the truthfulness of a single and relatively unknown company. The company notably didn’t say how much it cost to train its model, leaving out potentially expensive research and development costs. (Still, it probably didn’t spend billions of dollars.)
+
+It’s also far too early to count out American tech innovation and leadership. One achievement, albeit a gobsmacking one, may not be enough to counter years of progress in American AI leadership. And a massive customer shift to a Chinese startup is unlikely.
+
+“The DeepSeek model rollout is leading investors to question the lead that US companies have and how much is being spent and whether that spending will lead to profits (or overspending),” said Keith Lerner, analyst at Truist. “Ultimately, our view, is the required spend for data and such in AI will be significant, and US companies remain leaders.”
+
+Although the cost-saving achievement may be significant, the R1 model is a ChatGPT competitor — a consumer-focused large-language model. It hasn’t yet proven it can handle some of the massively ambitious AI capabilities for industries that — for now — still require tremendous infrastructure investments.
+
+“Thanks to its rich talent and capital base, the US remains the most promising ‘home turf’ from which we expect to see the emergence of the first self-improving AI,” said Giuseppe Sette, president of AI market research firm Reflexivity. 
+    `,
+  },
+];