├── img
├── S
└── Chiku.png
├── .github
└── workflows
│ └── static.yml
├── README.md
├── script.js
├── background.js
├── index.html
└── styles.css
/img/S:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/img/Chiku.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Itz-Murali/Chiku-Ai-Image-Gen/HEAD/img/Chiku.png
--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
1 | # Simple workflow for deploying static content to GitHub Pages
2 | name: Deploy static content to Pages
3 |
4 | on:
5 | # Runs on pushes targeting the default branch
6 | push:
7 | branches: ["main"]
8 |
9 | # Allows you to run this workflow manually from the Actions tab
10 | workflow_dispatch:
11 |
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 | contents: read
15 | pages: write
16 | id-token: write
17 |
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 | group: "pages"
22 | cancel-in-progress: false
23 |
24 | jobs:
25 | # Single deploy job since we're just deploying
26 | deploy:
27 | environment:
28 | name: github-pages
29 | url: ${{ steps.deployment.outputs.page_url }}
30 | runs-on: ubuntu-latest
31 | steps:
32 | - name: Checkout
33 | uses: actions/checkout@v4
34 | - name: Setup Pages
35 | uses: actions/configure-pages@v5
36 | - name: Upload artifact
37 | uses: actions/upload-pages-artifact@v3
38 | with:
39 | # Upload entire repository
40 | path: '.'
41 | - name: Deploy to GitHub Pages
42 | id: deployment
43 | uses: actions/deploy-pages@v4
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | ✨ ChikuAi — Your Magical Image Genie ✨
6 |
7 |
8 | Enter Prompt, Get Art. Simple, Fast, Beautiful.
9 |
10 |
11 | 
12 |
13 |
14 |
15 | ---
16 |
17 | ### 🌟 What Is ChikuAi?
18 |
19 | > **ChikuAi** Is A Minimal Yet Powerful Ai-Powered Image Generator
20 | > Type Any Prompt, And Watch Magic Happen Instantly.
21 | > Inspired By Imagination, Built With 💖 Love, And Delivered With Speed.
22 |
23 | ---
24 |
25 | ### 🧠 Features
26 |
27 | - Clean Ui With Beautiful Colors 🎉
28 | - Instant Image Generation Using Pollinations AI 💙
29 | - Auto Fallback To Backup Api If Needed ❄️
30 | - Mobile Friendly & Fully Responsive 📱
31 | - 100% Free To Use ✅
32 |
33 | ---
34 |
35 | ### 🛠️ Tech Stack
36 |
37 | - **Tool**: [Pollinations AI](https://pollinations.ai/)
38 | - **Hosting**: [Vercel](https://vercel.com/)
39 | - **Frontend**: Vanilla JS, HTML, CSS
40 |
41 | ---
42 |
43 | ### 🧾 Credits
44 |
45 | | Role | Name |
46 | |------------|---------------|
47 | | 👩💻 Developer | [Murali 💻](https://Murali.vercel.app) |
48 | | 🚀 Hosting | Vercel |
49 | | 🎨 Tool | Pollinations AI |
50 |
51 | ---
52 |
53 |
54 |
55 |
56 | 
57 |
58 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const generateBtn = document.querySelector('.generate-btn');
2 | const promptInput = document.getElementById('promptInput');
3 | const imageContainer = document.getElementById('imageContainer');
4 | const popup = document.getElementById('popup');
5 |
6 | function showPopup(message) {
7 | popup.textContent = message;
8 | popup.style.display = 'block';
9 | setTimeout(() => {
10 | popup.style.display = 'none';
11 | }, 3000);
12 | }
13 |
14 |
15 | function getPollinationsImageUrl(prompt) {
16 | const base = "https://image.pollinations.ai/prompt/";
17 | const params = new URLSearchParams({
18 | width: 1080,
19 | height: 1080,
20 | nologo: "true",
21 | private: "true",
22 | seed: 42,
23 | enhance: "true",
24 | model: "flux-pro"
25 | });
26 | return `${base}${encodeURIComponent(prompt)}?${params.toString()}`;
27 | }
28 |
29 | generateBtn.addEventListener('click', async () => {
30 | const prompt = promptInput.value.trim();
31 | if (!prompt) {
32 | showPopup("Please enter a prompt!");
33 | return;
34 | }
35 |
36 | imageContainer.innerHTML = `
37 |
38 |
✨
39 |
Generating ...
40 |
✨
41 |
`;
53 | return;
54 | } else {
55 | throw new Error("Pollinations API failed.");
56 | }
57 | } catch (err) {
58 | console.warn("Pollinations failed:", err.message);
59 | }
60 |
61 |
62 | try {
63 | const duckUrl = `https://imgen.duck.mom/prompt/${encodeURIComponent(prompt)}`;
64 | const response = await fetch(duckUrl);
65 |
66 | if (!response.ok) {
67 | throw new Error("DuckMom API failed.");
68 | }
69 |
70 | const blob = await response.blob();
71 | const imageUrl = URL.createObjectURL(blob);
72 | imageContainer.innerHTML = ``;
73 | } catch (err) {
74 | console.warn("DuckMom API failed:", err.message);
75 | imageContainer.innerHTML = "";
76 | showPopup("Oops! Image generation failed.");
77 | }
78 | });
79 |
--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
1 | var gradientColorsArray = new Array(
2 | "#a8edea", // soft sky blue
3 | "#fed6e3", // soft pink clouds
4 | "#fceabb", // warm sunlight
5 | "#d4fc79", // grassy green
6 | "#96e6a1", // calm leaf green
7 | "#84fab0", // mint freshness
8 | "#a6c0fe", // cool sky fade
9 | "#f9f586", // bright morning sun
10 | "#ffecd2", // soft golden hour
11 | "#f6d365", // mellow sunshine
12 | "#c2ffd8", // soft mist
13 | "#ff9a9e", // pink horizon
14 | "#fbc2eb", // dreamy pink mist
15 | "#cfd9df", // morning haze
16 | "#e0c3fc", // lavender glow
17 | "#c2e9fb", // baby blue sky
18 | "#fdfbfb", // pure cloud white
19 | "#ffeaa7", // sun-kissed yellow
20 | "#b6fcd5", // refreshing spring
21 | "#dff9fb", // clear morning
22 | "#f3e5f5", // light lilac
23 | "#fce38a", // soft pastel yellow
24 | "#ffdde1", // warm fluffy pink
25 | "#e0f7fa", // fresh blue breeze
26 | "#eaffd0", // garden dew green
27 | "#fcd5ce" // blush pink morning
28 | );
29 |
30 | var gradientTransitionStep = 0;
31 |
32 |
33 | var gradientColorIndices = [0, 1, 2, 3];
34 |
35 |
36 | var gradientTransitionSpeed = 0.004;
37 |
38 | function updateGradientBackground() {
39 | if (typeof jQuery === 'undefined') return;
40 |
41 |
42 | var currentLeftColorIndex = gradientColorIndices[0];
43 | var nextLeftColorIndex = gradientColorIndices[1];
44 | var currentRightColorIndex = gradientColorIndices[2];
45 | var nextRightColorIndex = gradientColorIndices[3];
46 |
47 | var currentLeftColorHex = gradientColorsArray[currentLeftColorIndex];
48 | var nextLeftColorHex = gradientColorsArray[nextLeftColorIndex];
49 | var currentRightColorHex = gradientColorsArray[currentRightColorIndex];
50 | var nextRightColorHex = gradientColorsArray[nextRightColorIndex];
51 |
52 | var inverseGradientStep = 1 - gradientTransitionStep;
53 |
54 | function hexToRgb(hex) {
55 | var r = parseInt(hex.slice(1, 3), 16);
56 | var g = parseInt(hex.slice(3, 5), 16);
57 | var b = parseInt(hex.slice(5, 7), 16);
58 | return [r, g, b];
59 | }
60 |
61 | var [rLeftStart, gLeftStart, bLeftStart] = hexToRgb(currentLeftColorHex);
62 | var [rLeftEnd, gLeftEnd, bLeftEnd] = hexToRgb(nextLeftColorHex);
63 | var [rRightStart, gRightStart, bRightStart] = hexToRgb(currentRightColorHex);
64 | var [rRightEnd, gRightEnd, bRightEnd] = hexToRgb(nextRightColorHex);
65 |
66 | var redLeft = Math.round(inverseGradientStep * rLeftStart + gradientTransitionStep * rLeftEnd);
67 | var greenLeft = Math.round(inverseGradientStep * gLeftStart + gradientTransitionStep * gLeftEnd);
68 | var blueLeft = Math.round(inverseGradientStep * bLeftStart + gradientTransitionStep * bLeftEnd);
69 | var leftGradientColor = "rgb(" + redLeft + "," + greenLeft + "," + blueLeft + ")";
70 |
71 | var redRight = Math.round(inverseGradientStep * rRightStart + gradientTransitionStep * rRightEnd);
72 | var greenRight = Math.round(inverseGradientStep * gRightStart + gradientTransitionStep * gRightEnd);
73 | var blueRight = Math.round(inverseGradientStep * bRightStart + gradientTransitionStep * bRightEnd);
74 | var rightGradientColor = "rgb(" + redRight + "," + greenRight + "," + blueRight + ")";
75 |
76 |
77 | $('#gradient').css({
78 | background: "-webkit-gradient(linear, left top, right top, from(" + leftGradientColor + "), to(" + rightGradientColor + "))"
79 | }).css({
80 | background: "-moz-linear-gradient(left, " + leftGradientColor + " 0%, " + rightGradientColor + " 100%)"
81 | });
82 |
83 | gradientTransitionStep += gradientTransitionSpeed;
84 | if (gradientTransitionStep >= 1) {
85 | gradientTransitionStep %= 1;
86 | gradientColorIndices[0] = gradientColorIndices[1];
87 | gradientColorIndices[2] = gradientColorIndices[3];
88 |
89 | gradientColorIndices[1] = (gradientColorIndices[1] + Math.floor(1 + Math.random() * (gradientColorsArray.length - 1))) % gradientColorsArray.length;
90 | gradientColorIndices[3] = (gradientColorIndices[3] + Math.floor(1 + Math.random() * (gradientColorsArray.length - 1))) % gradientColorsArray.length;
91 | }
92 | }
93 |
94 |
95 | setInterval(updateGradientBackground, 50); // It Means 10 milliseconds
96 |
97 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Chiku-Ai Image Generator
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
×
45 |
About Chiku Ai
46 |
47 | - ⚡ Fast and easy to use
48 | - 🖼️ HD quality anime-style images
49 | - ⬇️ Instant image download support
50 | - 🧠 Smart prompt handling with kawaii results
51 | - 🛡️ Anti-NSFW safe environment
52 | - 💖 Designed with love & cuteness in mind
53 | - 📱 Fully responsive on all devices
54 |
55 |
56 |
👩🎨 Powered by: Anime Image Generator Model
57 |
🌐 Hosting: Vercel with blazing speed
58 |
👨💻 Developer: Murali
59 |
60 | 🌟 Wanna Explore My More Projects?
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | ×
74 |
75 |
76 |
77 |
78 |
79 |
82 |
83 |
84 |