Skip to content

Commit 27eee09

Browse files
brown9804brown9804
authored
quick demos
1 parent 81362ff commit 27eee09

File tree

4 files changed

+509
-0
lines changed

4 files changed

+509
-0
lines changed

‎demos/0_GithubAImodels.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
# Prototyping with AI Models on GitHub
2+
3+
Costa Rica
4+
5+
[![GitHub](https://img.shields.io/badge/--181717?logo=github&logoColor=ffffff)](https://github.com/) [brown9804](https://github.com/brown9804)
6+
7+
Last updated: 2025-08-04
8+
9+
----------------------
10+
11+
> GitHub provides a platform for developers to `prototype, experiment with, and integrate AI models into their projects`. This process involves several key steps and tools that facilitate the development and deployment of AI-powered applications.
12+
13+
<details>
14+
<summary><b>List of References </b> (Click to expand)</summary>
15+
16+
- [Prototyping with AI models](https://docs.github.com/en/github-models/prototyping-with-ai-models)
17+
- [GitHub Models](https://docs.github.com/en/github-models)
18+
- [Github Marketplace Models Catalog](https://github.com/marketplace/models/catalog)
19+
20+
</details>
21+
22+
23+
<details>
24+
<summary><b>Table of Content</b> (Click to expand)</summary>
25+
26+
- [Overview](#overview)
27+
- [Demo](#demo)
28+
- [Set Up Your Environment](#set-up-your-environment)
29+
- [Find and Select an AI Model](#find-and-select-an-ai-model)
30+
- [Experiment in the Playground](#experiment-in-the-playground)
31+
- [Integrate with Visual Studio Code](#integrate-with-visual-studio-code)
32+
- [Make API Requests](#make-api-requests)
33+
- [Process and Use Responses](#process-and-use-responses)
34+
- [Transition to Production](#transition-to-production)
35+
36+
</details>
37+
38+
## Overview
39+
40+
| **Component** | **Description** |
41+
|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
42+
| **Finding AI Models** | You can find various AI models on the GitHub Marketplace. Navigate to the `Models` section to explore available models and view their details. |
43+
| **Experimenting with AI Models**| GitHub offers a playground where you can test different models by adjusting parameters and submitting prompts. You can experiment with AI models using the API provided by GitHub. |
44+
| **Saving and Sharing Experiments** | You can save your playground experiments and share them with others. This is useful for collaboration and getting feedback on your prototypes. |
45+
| **Integration with Visual Studio Code** | GitHub models can be integrated into Visual Studio Code, allowing you to experiment with AI models directly within your development environment. |
46+
| **Going to Production** | Once you are ready to move from prototyping to production, you can switch to using a token from a paid Azure account. This provides more robust and scalable options for deploying your AI models. |
47+
| **Rate Limits** | There are rate limits in place to ensure fair usage of the AI models. These limits vary depending on the model and usage scenario. Monitoring your usage and optimizing requests can help you stay within these limits. The rate limits for the playground and free API usage are intended to help you experiment with models and prototype your AI application. For use beyond those limits, and to bring your application to scale, you must provision resources from an Azure account, and authenticate from there instead of your GitHub personal access token. |
48+
49+
## Demo
50+
### Set Up Your Environment
51+
52+
1. **Create a GitHub Repository**:
53+
- Go to GitHub and sign in to your account.
54+
- Click on the **+** icon in the top right corner and select **New repository**.
55+
56+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/9a9e85b8-0976-4c5a-9102-9802b8ca864b" />
57+
58+
- Name your repository and choose its visibility (public or private).
59+
- Click **Create repository**.
60+
61+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/c37e8637-3a25-439e-8276-9ffe7edfcca4" />
62+
63+
2. **Generate a Personal Access Token (PAT)**:
64+
- Click on your profile picture in the top right corner and select **Settings**.
65+
66+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/58182b98-1903-4c67-baf6-737bd6db2b5a" />
67+
68+
- In the left sidebar, click **Developer settings**.
69+
70+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/45151b34-c8ba-416d-823c-9c0e53b6f77a" />
71+
72+
- Click **Personal access tokens** and then **Generate new token**.
73+
74+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/57478e3f-51ee-4271-945e-761630da9936" />
75+
76+
- Select the scopes you need (e.g., `repo`, `workflow`, `copilot`) and click **Generate token**.
77+
- Copy the token and store it securely.
78+
79+
<table>
80+
<tr>
81+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/28dbaab1-e855-4d3b-8fa7-4b732c9d65e4" /></td>
82+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/d647dec3-9a5d-41d8-8449-cacf11031512" /></td>
83+
</tr>
84+
</table>
85+
86+
### Find and Select an AI Model
87+
88+
1. **Navigate to GitHub Marketplace**:
89+
- Go to the GitHub Marketplace.
90+
- Click on the **Models** section to explore available AI models.
91+
92+
<table>
93+
<tr>
94+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/4d1fda24-f87e-4b19-a92b-6f056768cdb0" /></td>
95+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/5ef8ee5f-0ff7-4cb3-a09f-c9782dabc22f" /></td>
96+
</tr>
97+
</table>
98+
99+
2. **Select a Model**:
100+
- Browse through the models and select one that fits your needs, such as **OpenAI GPT-4**.
101+
- Review the model’s details, capabilities, and usage instructions.
102+
103+
<table>
104+
<tr>
105+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/2e6063c4-ff13-48bf-b879-59d64f1333fb" /></td>
106+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/ea65e7ed-26c5-49af-9c31-7d01a098f2b2" /></td>
107+
</tr>
108+
</table>
109+
110+
### Experiment in the Playground
111+
1. **Access the Playground**:
112+
- Go to the playground section for the selected model.
113+
- You can find this in the model’s details page on GitHub Marketplace.
114+
115+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/9038b2ae-eb72-49a4-bc40-54f41d8feef6" />
116+
117+
2. **Test the Model**:
118+
- Adjust parameters such as prompt, temperature, and max tokens.
119+
- Submit prompts to see how the model responds.
120+
- Example prompt: `Explain the basics of machine learning`
121+
122+
<table>
123+
<tr>
124+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/b1e1d229-e7ad-47eb-83e9-5ed3213537b8" /></td>
125+
<td><img width="400" alt="image" src="" /></td>
126+
</tr>
127+
</table>
128+
129+
- You can compare the performance between models:
130+
131+
<table>
132+
<tr>
133+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/a512c5e9-4021-4db8-95ec-959c43749d23" /></td>
134+
<td><img width="400" alt="image" src="https://github.com/user-attachments/assets/22fe2804-cd2a-41e1-a391-5e93eb16f17e" /></td>
135+
</tr>
136+
</table>
137+
138+
3. **Save Experiments**:
139+
- Save your experiments by clicking on the `Save` button.
140+
- Share the saved experiments with collaborators for feedback.
141+
142+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/04939a90-6bc6-4146-be1a-12b1b4dd7968" />
143+
144+
### Integrate with Visual Studio Code
145+
1. **Install Extensions**:
146+
- Open Visual Studio Code.
147+
- Go to the Extensions view by clicking on the Extensions icon in the Activity Bar.
148+
- Search for and install the `GitHub Copilot` extension.
149+
150+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/2160aff7-0589-4b33-bbeb-71b1235b58b8" />
151+
152+
2. **Set Up API Key**:
153+
- Open a terminal in Visual Studio Code.
154+
- Set your API key by running:
155+
```bash
156+
export OPENAI_API_KEY="your-api-key"
157+
```
158+
159+
### Make API Requests
160+
1. **Write a Script**:
161+
- Create a new file in your repository, e.g., `ai_model_test.py`.
162+
- Write a script to make API requests to the AI model. For example:
163+
```python
164+
import openai
165+
166+
openai.api_key = "your-api-key"
167+
168+
response = openai.Completion.create(
169+
model="gpt-4",
170+
prompt="Explain the basics of machine learning.",
171+
max_tokens=100
172+
)
173+
174+
print(response.choices[0].text)
175+
```
176+
177+
2. **Run the Script**: Run your script in the terminal to see the model’s response.
178+
179+
### Process and Use Responses
180+
181+
| **Step** | **Description** |
182+
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
183+
| **Integrate Responses** | - Use the responses from the AI model in your application. <br> - For example, display the generated text in a web app or use it to automate a task. |
184+
| **Optimize and Iterate**| - Continuously optimize your prompts and code based on the responses. <br> - Iterate to improve the performance and relevance of the AI model. |
185+
186+
### Transition to Production
187+
188+
| **Step** | **Description** |
189+
|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
190+
| **Provision Azure Resources** | - Sign in to your Azure account. <br> - Provision the necessary resources, such as Azure Cognitive Services. |
191+
| **Update Authentication** | - Switch from using your GitHub PAT to an Azure production key. <br> - Update your environment variable: <br> ``` export OPENAI_API_KEY="your-azure-api-key"```
192+
| **Monitor and Scale** | Monitor your usage and scale your application as needed using Azure’s infrastructure |
193+
194+
195+
<!-- START BADGE -->
196+
<div align="center">
197+
<img src="https://img.shields.io/badge/Total%20views-1312-limegreen" alt="Total views">
198+
<p>Refresh Date: 2025-08-27</p>
199+
</div>
200+
<!-- END BADGE -->
201+

‎demos/1_GitHubPagesOverview/README.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# GitHub Pages -Overview
2+
3+
Costa Rica
4+
5+
[![GitHub](https://img.shields.io/badge/--181717?logo=github&logoColor=ffffff)](https://github.com/) [brown9804](https://github.com/brown9804)
6+
7+
Last updated: 2025-08-04
8+
----------------------
9+
10+
> **GitHub Pages** is a feature provided by GitHub that allows you to `host static websites directly from a GitHub repository`. It's a great way to showcase your projects, create personal websites, or host documentation for your repositories.
11+
12+
<details>
13+
<summary><b>List of References</b> (Click to expand)</summary>
14+
15+
- [Websites for you and your projects](https://pages.github.com/)
16+
- [Essentials of automated application deployment with GitHub Actions and GitHub Pages](https://resources.github.com/learn/pathways/automation/essentials/automated-application-deployment-with-github-actions-and-pages/)
17+
18+
</details>
19+
20+
<details>
21+
<summary><b>Table of Content</b> (Click to expand)</summary>
22+
23+
- [Wiki](#wiki)
24+
- [Content](#content)
25+
- [How is GitHub Pages Used?](#how-is-github-pages-used)
26+
- [Automate the process of converting Markdown to static HTML and deploying it using GitHub Pages and GitHub Actions](#automate-the-process-of-converting-markdown-to-static-html-and-deploying-it-using-github-pages-and-github-actions)
27+
- [Setting Up GitHub Pages](#setting-up-github-pages)
28+
29+
</details>
30+
31+
> What is GitHub Pages? <br/>
32+
> GitHub Pages is a `free service that turns your GitHub repositories into websites`. You can host HTML, CSS, and JavaScript files, and it’s perfect for static websites that `don’t require server-side processing`. GitHub Pages supports custom domains, making it easy to create a professional-looking website.
33+
34+
## How is GitHub Pages Used?
35+
- **Personal Websites**: Showcase your portfolio, resume, or blog.
36+
- **Project Documentation**: Host documentation for your open-source projects.
37+
- **Organization Sites**: Create websites for organizations or communities.
38+
- **Demo Sites**: Share live demos of your projects.
39+
40+
## Automate the process of converting Markdown to static HTML and deploying it using GitHub Pages and GitHub Actions
41+
42+
1. Create a GitHub Repository
43+
- Go to GitHub and create a new repository. Name it `username.github.io`, where `username` is your GitHub username.
44+
- Make sure the repository is public.
45+
2. Add Your Markdown Files
46+
- Clone the repository to your local machine.
47+
- Add your Markdown files to the repository.
48+
- Commit and push the changes to GitHub.
49+
3. Create a GitHub Actions Workflow
50+
- In your repository, create a `.github/workflows` directory.
51+
- Inside this directory, create a file named `md-html-deploy.yml`.
52+
4. Define the Workflow: Add the following content to the `md-html-deploy.yml` file to set up a workflow that converts Markdown to HTML and deploys it to the `main` branch:
53+
1. **Checkout Repository**: This step checks out your repository so that the workflow can access the files.
54+
2. **Set up Node.js**: This step sets up Node.js, which is required for some Markdown converters.
55+
3. **Install Dependencies**: This step installs the necessary dependencies for your project.
56+
4. **Convert Markdown to HTML**: This step uses `pandoc` to convert Markdown files to HTML and places them in the `_site` directory.
57+
5. **Deploy to GitHub Pages**: This step commits the generated HTML files back to the `main` branch and pushes the changes. This ensures that your GitHub Pages site is updated with the latest HTML files.
58+
59+
> Click [here to see an example of the pipeline](./pipelines/markdown-to-html-deploy-gitpages.yml)
60+
61+
## Setting Up GitHub Pages
62+
1. **Create a Repository**: Create a new repository on GitHub or use an existing one.
63+
2. **Enable GitHub Pages**:
64+
- Go to the repository settings on GitHub.
65+
- Under the `GitHub Pages` section, select the `main` branch as the source.
66+
67+
<img width="550" alt="image" src="https://github.com/user-attachments/assets/6143fc94-5e77-45c5-8680-4f269b0dc242" />
68+
69+
> Static HTML refers to web pages that are delivered to the user's browser exactly as stored, without any server-side processing. Static sites are fast, secure, and easy to deploy, making them ideal for simple websites, portfolios, blogs, and documentation.
70+
3. Push Your Code: Commit and push your code to the main branch. The GitHub Actions workflow will automatically run and deploy your site to GitHub Pages.
71+
72+
<!-- START BADGE -->
73+
<div align="center">
74+
<img src="https://img.shields.io/badge/Total%20views-1312-limegreen" alt="Total views">
75+
<p>Refresh Date: 2025-08-27</p>
76+
</div>
77+
<!-- END BADGE -->

‎demos/1_GitHubPagesOverview/pipelines/markdown-to-html-deploy-gitpages.yml‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
name: Workflow to convert Markdown files to HTML and deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main # Trigger the workflow on push to the main branch
7+
- dev # Trigger the workflow on push to the dev branch
8+
- feature/* # Trigger the workflow on push to any feature branch
9+
10+
jobs:
11+
build-and-deploy:
12+
runs-on: ubuntu-latest # Use the latest Ubuntu environment
13+
14+
steps:
15+
# Step 1: Checkout the repository
16+
- name: Checkout repository
17+
uses: actions/checkout@v2
18+
19+
# Step 2: Set up Node.js environment
20+
- name: Set up Node.js
21+
uses: actions/setup-node@v2
22+
with:
23+
node-version: '14' # Specify the Node.js version
24+
25+
# Step 3: Install npm dependencies
26+
- name: Install dependencies
27+
run: npm install
28+
29+
# Step 4: Install pandoc for Markdown to HTML conversion
30+
- name: Install pandoc
31+
run: sudo apt-get install -y pandoc
32+
33+
# Step 5: Convert all Markdown files to HTML while preserving directory structure
34+
- name: Convert Markdown to HTML
35+
run: |
36+
mkdir -p _site # Create the _site directory if it doesn't exist
37+
# Find all Markdown files and convert them to HTML, preserving directory structure
38+
find . -name "*.md" -type f | while read file; do
39+
# Create the corresponding directory in _site
40+
mkdir -p "_site/$(dirname "$file")"
41+
# Convert the Markdown file to HTML and save it in the corresponding directory
42+
pandoc "$file" --standalone --toc -o "_site/${file%.md}.html"
43+
done
44+
45+
# Step 6: Deploy the generated HTML files to GitHub Pages
46+
- name: Deploy to GitHub Pages
47+
run: |
48+
# Configure Git with a bot email and name
49+
git config --global user.email "github-actions[bot]@users.noreply.github.com"
50+
git config --global user.name "github-actions[bot]"
51+
# Check for local changes and stash them if present
52+
if [ -n "$(git status --porcelain)" ]; then
53+
git stash
54+
git pull origin ${{ github.ref }} --rebase
55+
git stash pop || true # Ignore error if no stash entries to pop
56+
else
57+
git pull origin ${{ github.ref }} --rebase
58+
fi
59+
# Add all changes, including untracked files
60+
git add -A
61+
# Check for changes before committing
62+
if git diff-index --quiet HEAD --; then
63+
echo "No changes to commit"
64+
exit 0
65+
else
66+
# Commit the changes
67+
git commit -m 'Deploy static HTML files'
68+
# Push the changes to the remote branch
69+
git push origin HEAD:${{ github.ref }}
70+
fi

0 commit comments

Comments
 (0)