AI-generated content has risen in popularity, so what is an easy way to learn how to use it?
This is a demonstration webpage on how to use Generative AI following the playbook included in this repository.
The playbook is a tutorial shared by the International Society of Service Innovation Professionals (ISSIP) on how to create your own webpage to promote "Service Innovation" using AI generated content, such as text, images, and video.
- Claude AI was used to generate text.
- Bing Image create was used to generate images.
- HourOne was used to generate a video using the above sources as inputs.
Claude AI (text prompt):
- "Write me a short paragraph explaining how the ATM is an important service innovation"
Bing Image create (image prompt):
- “happy person using an atm”
HourOne (video options selected):
- Presenter: Emily (Christmas)
- Voice: Nova (English, US)
The HTML webpage was coded by myself following the playbook.
A demonstration of how to host the website on GitHub Pages as done on this repository could be a good addition to the playbook.
Suggested Prerequisites
- Make a GitHub account
- Download Visual Studio Code (FREE!) to write HTML and Markdown
- Download the Live Server extension in Visual Studio Code (to preview HTML webpages and see live feedback)
- Download the Markdown Preview Enhanced extension in Visual Studio Code (to preview Markdown and see live feedback)
PART 1: Make the webpage in VS Code:
- Create a new folder on your computer
- Copy an image into this folder
- Right click in this folder and select Open in VS Code
- Create a new text file and name it index.html
- Follow the playbook instructions to make a webpage
TIP: You can click "Go Live" in VS Code to preview the webpage
- Create a new text file and name it README.md
- Write something to explain your work
TIP: You can use Markdown Preview Enhanced to preview your README file
- Go to Source Control and Initalize Repository (you may have to sign in to your GitHub account)
TIP: Write a brief message to explain what you did, like "created webpage"
- Commit the changes and Publish to your public repository
- Your files have now been uploaded onto a GitHub repository! Go to your GitHub account to check it out.
PART 2: Host the webpage via GitHub Pages
- Go to your repository on GitHub
- Go to the Settings of that repository
- On the left under "Code and Automation" go to Pages
- Under "Branch" select "main" and click Save
TIP: Hosting your webpage may take a couple minutes, so get a drink and refresh the page
- When it says "Your site is live" your HTML webpage is now up for the internet to see!
TIP: Edit the "About" and README.md on your GitHub repository to conveniently include the link to your site