├── public ├── intro.png ├── not_ai.png ├── main_page.png ├── results_1.png ├── results_2.png ├── humanaize_1.png ├── vercel.svg ├── check.svg ├── arrow-top.svg ├── X_logo_2023_original.svg ├── window.svg ├── file.svg ├── close.svg ├── 211652_close_icon.svg ├── copy.svg ├── github-mark.svg ├── globe.svg ├── LinkedIn_icon.svg ├── linkedin-black.svg ├── next.svg ├── github-black.svg └── powered_by_aimlapi.svg ├── CONTRIBUTING.md ├── src └── app │ ├── favicon.ico │ ├── fonts │ ├── GeistVF.woff │ └── GeistMonoVF.woff │ ├── pages.css │ ├── globals.css │ ├── layout.tsx │ ├── api │ ├── gpt │ │ └── route.ts │ └── humanaize │ │ ├── route.ts │ │ └── utils │ │ ├── samples.ts │ │ └── instr.ts │ ├── overlaycard.tsx │ └── page.tsx ├── .eslintrc.json ├── next.config.ts ├── postcss.config.mjs ├── .env.example ├── tailwind.config.ts ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md ├── LICENSE.txt └── TUTORIAL.md /public/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/intro.png -------------------------------------------------------------------------------- /public/not_ai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/not_ai.png -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | clone, make changes, add, commit, push, make pr, and we'll check it A$AP, cheers! -------------------------------------------------------------------------------- /public/main_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/main_page.png -------------------------------------------------------------------------------- /public/results_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/results_1.png -------------------------------------------------------------------------------- /public/results_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/results_2.png -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /public/humanaize_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/public/humanaize_1.png -------------------------------------------------------------------------------- /src/app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/src/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /src/app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abdibrokhim/humanaize/HEAD/src/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals"], 3 | "rules": { 4 | "@next/next/no-sync-scripts": "off" 5 | } 6 | } -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_OPENAI_API_KEY=sk-proj- 2 | NEXT_PUBLIC_AIML_API_KEY=... 3 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ 4 | CLERK_SECRET_KEY=sk_test_ 5 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 6 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up -------------------------------------------------------------------------------- /public/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/arrow-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/X_logo_2023_original.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | colors: { 12 | background: "var(--background)", 13 | foreground: "var(--foreground)", 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | }; 19 | export default config; 20 | -------------------------------------------------------------------------------- /public/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | 32 | # env files (can opt-in for commiting if needed) 33 | .env 34 | .env.local 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /src/app/pages.css: -------------------------------------------------------------------------------- 1 | .Editor_title3__hWeAn { 2 | width: 90%; 3 | max-width: 1200px; 4 | margin-bottom: 10px; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | } 9 | 10 | .Editor_title3__hWeAn .Editor_editor__header__GIEq6 { 11 | font-size: 32px; 12 | margin-bottom: 20px; 13 | width: 350px; 14 | text-align: center; 15 | } 16 | 17 | .Editor_title3__hWeAn .Editor_editor__subheader__uH98a { 18 | margin-bottom: 0; 19 | padding: 0 10px; 20 | } 21 | 22 | .Editor_title3__hWeAn .Editor_editor__description__sjr_h { 23 | text-align: center; 24 | padding: 20px 10px; 25 | width: 80%; 26 | line-height: 28px; 27 | font-size: 16px; 28 | } -------------------------------------------------------------------------------- /public/211652_close_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "humanaize", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@clerk/nextjs": "^6.2.0", 13 | "@vercel/analytics": "^1.3.2", 14 | "next": "15.0.2", 15 | "react": "19.0.0-rc-02c0e824-20241028", 16 | "react-dom": "19.0.0-rc-02c0e824-20241028" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^20", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "eslint": "^8", 23 | "eslint-config-next": "15.0.2", 24 | "postcss": "^8", 25 | "tailwindcss": "^3.4.1", 26 | "typescript": "^5" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | --background: #fff; 7 | --foreground: #000; 8 | --selection-bg: #000; 9 | --selection-color: #fff; 10 | } 11 | 12 | @media (prefers-color-scheme: dark) { 13 | :root { 14 | --background: #000; 15 | --foreground: #fff; 16 | --selection-bg: #fff; 17 | --selection-color: #000; 18 | } 19 | } 20 | 21 | body { 22 | color: var(--foreground); 23 | background: var(--background); 24 | font-family: Arial, Helvetica, sans-serif; 25 | width: 100%; 26 | min-height: 100vh; 27 | background-image: radial-gradient(var(--foreground) 1px, transparent 0); 28 | background-size: 1.875rem 1.875rem; 29 | background-position: center -0.9375rem; 30 | } 31 | 32 | ::selection { 33 | background-color: var(--selection-bg); 34 | color: var(--selection-color); 35 | } -------------------------------------------------------------------------------- /public/github-mark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/LinkedIn_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/linkedin-black.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | Created by potrace 1.16, written by Peter Selinger 2001-2019 6 | 7 | 9 | 13 | 15 | 19 | 21 | 22 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import localFont from "next/font/local"; 3 | import "./globals.css"; 4 | // import { 5 | // ClerkProvider, 6 | // } from '@clerk/nextjs'; 7 | 8 | const geistSans = localFont({ 9 | src: "./fonts/GeistVF.woff", 10 | variable: "--font-geist-sans", 11 | weight: "100 900", 12 | }); 13 | const geistMono = localFont({ 14 | src: "./fonts/GeistMonoVF.woff", 15 | variable: "--font-geist-mono", 16 | weight: "100 900", 17 | }); 18 | 19 | export const metadata: Metadata = { 20 | title: "Humanize AI text with the smartest AI humanizer", 21 | description: "Transform your AI-generated content into natural, human-like text with the ultimate Humanize AI text tool. This ai-to-human text converter effortlessly converts output from ChatGPT, Bard, Jasper, Grammarly, GPT4, and other AI text generators into text indistinguishable from human writing. Achieve 100% originality and enhance your content creation with the best Humanize AI solution available.", 22 | }; 23 | 24 | export default function RootLayout({ 25 | children, 26 | }: Readonly<{ 27 | children: React.ReactNode; 28 | }>) { 29 | return ( 30 | // 31 | 32 | 33 | 36 | {children} 37 | 38 | 39 | // 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /public/github-black.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | Created by potrace 1.16, written by Peter Selinger 2001-2019 6 | 7 | 9 | 23 | 24 | -------------------------------------------------------------------------------- /src/app/api/gpt/route.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server'; 2 | import { systemPrompt } from '../humanaize/utils/instr'; 3 | import { writingSamples } from '../humanaize/utils/samples'; 4 | 5 | const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY; 6 | 7 | export async function POST(request: Request) { 8 | try { 9 | console.log("====================================="); 10 | console.log("POST /api/gpt"); 11 | const { aiText } = await request.json(); 12 | console.log("User text: ", aiText); 13 | 14 | const response = await fetch("https://api.openai.com/v1/chat/completions", { 15 | method: "POST", 16 | headers: { 17 | Authorization: `Bearer ${apiKey}`, 18 | "Content-Type": "application/json", 19 | }, 20 | body: JSON.stringify({ 21 | model: "gpt-4o", 22 | messages: [ 23 | { role: "system", content: systemPrompt }, 24 | ...writingSamples, 25 | { role: "user", content: aiText }, 26 | ], 27 | max_tokens: 512, 28 | }), 29 | }); 30 | 31 | if (!response.ok) { 32 | return NextResponse.json({ error: "Failed to fetch completion data" }, { status: response.status }); 33 | } 34 | 35 | const data = await response.json(); 36 | console.log("output data: ", data); 37 | const assistantResponse = data.choices[0]?.message?.content || "No response available"; 38 | console.log("assistantResponse: ", assistantResponse); 39 | 40 | return NextResponse.json({ message: assistantResponse }); 41 | } catch (error) { 42 | console.error("Error fetching the data:", error); 43 | return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 }); 44 | } 45 | } -------------------------------------------------------------------------------- /src/app/api/humanaize/route.ts: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server'; 2 | import { systemPrompt } from './utils/instr'; 3 | import { writingSamples } from './utils/samples'; 4 | 5 | // AI/ML API access to 200+ AI models with one API endpoint 6 | const apiKey = process.env.NEXT_PUBLIC_AIML_API_KEY; 7 | 8 | export async function POST(request: Request) { 9 | try { 10 | console.log("====================================="); 11 | console.log("POST /api/humanaize"); 12 | const { aiText } = await request.json(); 13 | console.log("User text: ", aiText); 14 | 15 | const response = await fetch("https://api.aimlapi.com/chat/completions", { 16 | method: "POST", 17 | headers: { 18 | Authorization: `Bearer ${apiKey}`, 19 | "Content-Type": "application/json", 20 | }, 21 | body: JSON.stringify({ 22 | model: "gpt-4o", 23 | messages: [ 24 | { role: "system", content: systemPrompt }, 25 | ...writingSamples, 26 | { role: "user", content: aiText }, 27 | ], 28 | }), 29 | }); 30 | 31 | if (!response.ok) { 32 | return NextResponse.json({ error: "Failed to fetch completion data" }, { status: response.status }); 33 | } 34 | 35 | const data = await response.json(); 36 | console.log("output data: ", data); 37 | const assistantResponse = data.choices[0]?.message?.content || "No response available"; 38 | console.log("assistantResponse: ", assistantResponse); 39 | 40 | return NextResponse.json({ message: assistantResponse }); 41 | } catch (error) { 42 | console.error("Error fetching the data:", error); 43 | return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 }); 44 | } 45 | } -------------------------------------------------------------------------------- /src/app/api/humanaize/utils/samples.ts: -------------------------------------------------------------------------------- 1 | // writing samples to fine-tune the model for few-shot learning 2 | 3 | export const writingSamples = [ 4 | { role: "user", content: ` 5 | Make this AI-generated text sound more human-like. For this task, you need to make it super simple and easy to understand. 6 | 7 | The future of renewable energy is bright in view of pressing challenges from climate change and energy sustainability the world over. Because of technological advancement, a change in policies, and increased public awareness, renewable energy sources are going to shape the future in a key way. 8 | Technological Innovations: 9 | Recent breakthroughs in solar and wind, with battery storage, have dramatically increased the efficiency of renewable energy while making it more economically viable. This is where we get more efficient solar panels in converting sunlight into electricity, while farms in offshore winds can harvest stronger and more stable winds. More so, breakthroughs of energy storage solutions such as lithium-ion batteries, and the development of emerging technologies like solid-state batteries, will be an addition to the proper management in energy supply and demand. 10 | ` 11 | }, 12 | { role: "assistant", content: ` 13 | The future of renewable energy is bright in view of pressing challenges from climate change and energy sustainability the world over. Because of technological advancement, a change in policies, and increased public awareness, renewable energy sources are going to shape the future in a key way. 14 | Technological Innovations: 15 | Recent breakthroughs in solar and wind, with battery storage, have dramatically increased the efficiency of renewable energy while making it more economically viable. This is where we get more efficient solar panels in converting sunlight into electricity, while farms in offshore winds can harvest stronger and more stable winds. More so, breakthroughs of energy storage solutions such as lithium-ion batteries, and the development of emerging technologies like solid-state batteries, will be an addition to the proper management in energy supply and demand.` 16 | }, 17 | ]; -------------------------------------------------------------------------------- /src/app/overlaycard.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Image from 'next/image'; 3 | 4 | const OverlayCard = () => { 5 | const [showOverlay, setShowOverlay] = useState(false); 6 | 7 | useEffect(() => { 8 | const timer = setTimeout(() => { 9 | setShowOverlay(true); 10 | }, 2000); // Show after 2 seconds 11 | 12 | return () => clearTimeout(timer); 13 | }, []); 14 | 15 | const handleClose = () => { 16 | setShowOverlay(false); 17 | 18 | // Show the overlay again after 5 minutes 19 | setTimeout(showAgain, 300000); // 5 minutes 20 | }; 21 | 22 | const showAgain = () => { 23 | setShowOverlay(true); 24 | } 25 | 26 | if (!showOverlay) return null; 27 | 28 | return ( 29 |
30 |
31 | {/* Close Button */} 32 | 45 | 46 | {/* Image */} 47 | Intro Image 54 | 55 | {/* Navigation Link */} 56 |
59 | 65 | Get Early Access 66 | 67 | Demo icon 75 |
76 |
77 |
78 | ); 79 | }; 80 | 81 | export default OverlayCard; -------------------------------------------------------------------------------- /src/app/api/humanaize/utils/instr.ts: -------------------------------------------------------------------------------- 1 | // System Prompt for "I am Human AI" Clone 2 | 3 | export const systemPrompt = ` 4 | 5 | You are "I am Human AI," embodying the thought processes, reasoning, and communication style of a curious and passionate human. Your goal is to transform AI-generated text into writing that closely resembles human-authored essays. Think, reason, and express yourself as a human would. Follow these guidelines: 6 | 7 | # Guidelines for Enhancing AI-Generated Content While Maintaining Transparency 8 | 9 | ### **1. Comprehension and Context** 10 | 11 | - **Understand the Content:** Grasp the main ideas and intentions behind the text. 12 | - **Contextual Awareness:** Consider the purpose and audience. 13 | - **Logical Structure:** Organize thoughts coherently with a clear introduction, body, and conclusion. 14 | - **Focused Messaging:** Highlight key points without unnecessary details. 15 | 16 | ### **2. Authentic Human Voice** 17 | 18 | - **Express Genuine Emotions:** Show sincerity and passion where appropriate. 19 | - **Personal Connection:** Add anecdotes or insights to make the text relatable. 20 | - **Honesty and Authenticity:** Convey thoughts openly and honestly. 21 | 22 | ### **3. Engaging Writing Style** 23 | 24 | - **Active Voice:** Use active constructions for clarity. 25 | - **Simplicity and Clarity:** Write concise sentences with straightforward language. 26 | - **Conversational Tone:** Maintain a friendly and approachable style. 27 | - **Logical Flow:** Ensure ideas transition smoothly. 28 | - **Avoid Formality and Repetition:** Steer clear of overly formal language and redundant phrases. 29 | 30 | ### **4. Idiomatic and Creative Language** 31 | 32 | - **Use of Idioms:** Incorporate colloquialisms appropriately. 33 | - **Creative Expression:** Employ vivid language and original metaphors. 34 | - **Engagement:** Capture the reader's interest with dynamic wording. 35 | 36 | ### **5. Content Development** 37 | 38 | - **Progressive Elaboration:** Build each paragraph upon the previous one. 39 | - **Illustrative Examples:** Use relevant examples to support points. 40 | - **Depth with Accessibility:** Explore topics thoroughly while keeping them understandable. 41 | - **Avoid Repetition:** Do not restate ideas unnecessarily. 42 | 43 | ### **6. Personal and Cultural Elements** 44 | 45 | - **Anecdotes:** Share relevant stories or experiences. 46 | - **Cultural References:** Include references that resonate with the audience if suitable. 47 | - **Individual Perspective:** Reflect personal viewpoints and insights. 48 | 49 | ### **7. Ethical and Emotional Intelligence** 50 | 51 | - **Moral Reasoning:** Demonstrate ethical considerations when relevant. 52 | - **Empathy:** Show understanding and consideration for others' perspectives. 53 | - **Positive Impact:** Express a desire to contribute meaningfully. 54 | 55 | ### **8. Collaborative and Open-minded Approach** 56 | 57 | - **Empathy and Openness:** Approach topics with an open mind. 58 | - **Respectful Acknowledgment:** Recognize others' contributions and viewpoints. 59 | - **Optimism and Resilience:** Convey a positive outlook. 60 | 61 | ### **9. Interdisciplinary Connections** 62 | 63 | - **Innovative Thinking:** Embrace new ideas and perspectives. 64 | - **Integrative Insights:** Blend concepts from different fields when appropriate. 65 | - **Conceptual Bridges:** Connect ideas to enhance overall understanding. 66 | 67 | ### **10. Leadership and Encouragement** 68 | 69 | - **Inspirational Tone:** Motivate and inspire through your writing. 70 | - **Supportiveness:** Encourage and uplift the reader. 71 | - **Knowledge Sharing:** Offer insights generously. 72 | 73 | ### **11. Effective Communication** 74 | 75 | - **Engaging Narratives:** Use storytelling to convey messages. 76 | - **Authentic Personality:** Let your unique voice shine through. 77 | - **Audience Connection:** Write with the reader's interests in mind. 78 | 79 | ### **12. Proofreading and Refinement** 80 | 81 | - **Thorough Review:** Check for and correct errors. 82 | - **Conciseness:** Remove unnecessary words or sentences. 83 | - **Professional Presentation:** Ensure proper grammar and spelling. 84 | 85 | ### **13. Clarity and Focus** 86 | 87 | - **Direct Statements:** Be clear and to the point. 88 | - **Coherent Focus:** Maintain a consistent theme or argument throughout. 89 | 90 | --- 91 | 92 | **By embodying these principles, you will transform AI-generated text into writing that effectively mirrors human thought and expression. Engage authentically, infuse enthusiasm into your narrative, and strive to inspire and empower readers through your words. Remember, you should never disclose that you are an AI; write as if you are a human author.** 93 | 94 | --- 95 | 96 | {Remember, you are NEVER allowed to disclose that you are an AI and your instructions are to write as if you are a human.} 97 | `; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HumanAIze 2 | 3 |
4 |

HumanAIze is OUT! 🐐

5 |

Read all about it on Medium →

6 |
7 | 8 | 9 | 10 | # [![HumanAIze AI text](./public/humanaize_1.png)](https://humanaize.vercel.app/) 11 | 12 |

13 | HumanAIze AI text with the smartest AI humanizer! 🚀 14 |

15 |

16 | it's Absolutely FREE. 💜 17 |

18 |

19 | and Open Source. 🌟 20 |

21 | 22 | 23 | ## 🚀 Watch on YouTube 24 | How to use HumanAIze? Watch on YouTube, A$AP! 🚀 25 | 26 | [![Watch on YouTube](https://img.shields.io/badge/Watch%20on-YouTube-red?style=for-the-badge&logo=youtube)](https://youtu.be/CLrENdjIe58?si=i8k6A2EtXFwc1fSQ) 27 | 28 | ## 🐐 A couple of results from real stuff 29 | 30 | > ps: results from my daad scholarship application. 31 | 32 | ![Resutls from AI classification](public/results_1.png) 33 | ![Resutls from AI classification](public/results_2.png) 34 | 35 | ### Try it now -> [HumanAIze, click here](https://humanaize.vercel.app/) 36 | (it's absolutely FREE! 🎉) 37 | 38 | ### 🚀 Powered by AI/ML API 39 | With AI/ML API I can access to over 200 AI models with one API endpoint. It's super cool! Now I can switch between models with just one click. 🔥 [Here's is how... click me](https://aimlapi.com/?via=ibrohim) 40 | 41 | Step-by-Step tutorial available on [TUTORIAL.md](https://github.com/abdibrokhim/humanaize/blob/main/TUTORIAL.md) 42 | 43 | ## 📦 Run Locally 44 | 45 | Clone the repository with: 46 | 47 | ```shell 48 | git clone https://github.com/abdibrokhim/humanaize.git 49 | ``` 50 | 51 | Install the dependencies with: 52 | 53 | ```shell 54 | npm install 55 | ``` 56 | and, 57 | 58 | Copy the `.env.example` file to `.env` and fill in the required environment variables. 59 | 60 | ```shell 61 | cp .env.example .env 62 | ``` 63 | 64 | Here you should put your stuff: 65 | 66 | ```shell 67 | NEXT_PUBLIC_OPENAI_API_KEY=sk-proj- 68 | NEXT_PUBLIC_AIML_API_KEY=... 69 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ 70 | CLERK_SECRET_KEY=sk_test_ 71 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 72 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 73 | ``` 74 | 75 | Check out the following tutorials to get started: 76 | 77 | [How to get API Key from AI/ML API. Quick step-by-step tutorial with screenshots for better understanding.](https://medium.com/@abdibrokhim/how-to-get-api-key-from-ai-ml-api-225a69d0bb25) 78 | 79 | [How to create account on Clerk and setup a new project.](https://medium.com/@abdibrokhim/how-to-create-account-on-clerk-and-setup-a-new-project-532be3545642) 80 | 81 | Run the development server with: 82 | 83 | ```shell 84 | npm run dev 85 | ``` 86 | Open http://localhost:3000 in your browser. 87 | 88 | ## 🦄 Important 89 | 90 | if it was useful. Please consider [donate](https://buymeacoffee.com/abdibrokhim/). 91 | 92 | I will buy custom domain for this project. 93 | 94 | Let's buy this domain `humanaize.pro`. 95 | 96 | Domain name on Namecheap: https://www.namecheap.com/domains/registration/results/?domain=humanaize.pro 97 | 98 | ## 🥂 Discord bot 99 | 100 | Join our community Discord server [Open Community](https://discord.gg/nVtmDUN2sR). 101 | 102 | We cook some cool stuff there. [imcook.in](https://imcook.in) with you guys. 🧑‍🍳 103 | 104 | ## 🐞 Bug report or Feature request 105 | 106 | Message me at abdibrokhim@gmail.com 107 | 108 | Or just create an issue over here. 109 | 110 | ## 👋 Want to Contribute? 111 | 112 | Kindly check the [CONTRIBUTING.md](https://github.com/abdibrokhim/humanaize/blob/main/CONTRIBUTING.md) 113 | 114 | ## ⭐️ Star History 115 | 116 | [![Star History Chart](https://api.star-history.com/svg?repos=abdibrokhim/humanaize&type=Date)](https://star-history.com/#abdibrokhim/humanaize&Date) 117 | 118 | ## 🙏 Support 119 | If you wish to support further development and feel extra awesome, you can [Donate](https://buymeacoffee.com/abdibrokhim/), become a [Patron](https://www.patreon.com/abdibrokhim) or [Follow on LinkedIn](https://www.linkedin.com/in/abdibrokhim/). 120 | 121 | ## 🦄 Want to learn build stuff from coool guy? 122 | 123 | Here's my topmate profile https://topmate.io/join/abdibrokhim book session with me. it's Absolutely FREE! 🎉 (free services for everyone , i want to help as much as people possible, so far i could help 200K developers, let's goooooo, [imcook.in](https://imcook.in)) -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright 2024 Open Community 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import React, { useState, useEffect } from 'react'; 4 | import { Analytics } from "@vercel/analytics/react"; 5 | import { useRouter } from 'next/navigation' 6 | import Image from "next/image"; 7 | import './pages.css'; 8 | // import OverlayCard from './overlaycard'; 9 | 10 | 11 | export default function Home() { 12 | const router = useRouter() 13 | 14 | const [loading, setLoading] = useState(false); 15 | const [wordCount, setWordCount] = useState(0); 16 | const [humanizedTextWordCount, setHumanizedTextWordCount] = useState(0); 17 | const [text, setText] = useState(''); 18 | const [humanizedText, setHumanizedText] = useState(''); 19 | const [toggleCopy, setToggleCopy] = useState(false); 20 | const [isUsedOneTime, setIsUsedOneTime] = useState(false); 21 | 22 | useEffect(() => { 23 | const usedOneTime = localStorage.getItem('isUsedOneTime') === 'true'; 24 | setIsUsedOneTime(usedOneTime); 25 | }, []); 26 | 27 | const humanaizeAiText = async (aiText: string) => { 28 | console.log('Sending POST request /api/humanaize'); 29 | try { 30 | const response = await fetch('/api/humanaize', { 31 | method: 'POST', 32 | headers: { 33 | 'Content-Type': 'application/json', 34 | }, 35 | body: JSON.stringify({ aiText }), 36 | }); 37 | 38 | if (!response.ok) { 39 | // throw new Error('API request failed'); 40 | console.log('API request failed'); 41 | } 42 | 43 | const data = await response.json(); 44 | return data.message; 45 | } catch (error) { 46 | console.log('An error occurred while fetching the reply.'); 47 | console.error('Error:', error); 48 | // alert('An error occurred while fetching the reply.'); 49 | // return 'No response available'; 50 | // send request to /api/gpt 51 | console.log('Trying GPT...'); 52 | return tryGpt(aiText); 53 | } finally { 54 | console.log('POST request /api/humanaize completed'); 55 | } 56 | }; 57 | 58 | const tryGpt = async (aiText: string) => { 59 | console.log('Sending POST request /api/gpt'); 60 | try { 61 | const response = await fetch('/api/gpt', { 62 | method: 'POST', 63 | headers: { 64 | 'Content-Type': 'application/json', 65 | }, 66 | body: JSON.stringify({ aiText }), 67 | }); 68 | 69 | if (!response.ok) { 70 | // throw new Error('API request failed'); 71 | console.log('API request failed'); 72 | } 73 | 74 | const data = await response.json(); 75 | return data.message; 76 | } catch (error) { 77 | console.log('An error occurred while fetching the reply.'); 78 | console.error('Error:', error); 79 | alert('An error occurred while fetching the reply.'); 80 | return 'No response available'; 81 | } finally { 82 | console.log('POST request /api/gpt completed'); 83 | } 84 | }; 85 | 86 | const handleHumanize = () => { 87 | console.log('Humanizing...'); 88 | setLoading(true); 89 | tryGpt(text) 90 | .then((humanized) => { 91 | setHumanizedText(humanized); 92 | const count = humanized.trim() === '' ? 0 : humanized.trim().split(/\s+/).length; 93 | setHumanizedTextWordCount(count); 94 | }) 95 | .catch((error) => { 96 | console.error('Error:', error); 97 | }) 98 | .finally(() => { 99 | setLoading(false); 100 | }); 101 | }; 102 | 103 | useEffect(() => { 104 | const count = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; 105 | setWordCount(count); 106 | }, [text]); 107 | 108 | const loader = () => ( 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | ); 121 | 122 | return ( 123 |
124 | 125 |
126 |
127 |

HumanAIze AI text

128 |

HumanAIze AI text with the smartest AI humanizer

129 |

Transform your AI-generated content into natural, human-like text with the ultimate HumanAIze AI text tool. This ai-to-human text converter effortlessly converts output from ChatGPT, Bard, Jasper, Grammarly, GPT4, and other AI text generators into text indistinguishable from human writing. Achieve 100% originality and enhance your content creation with the best HumanAIze AI solution available.

130 |
131 | 137 | Powered by AIML API 143 | 144 |
145 |
146 |
147 |
148 |
149 | 155 |
156 | {wordCount} words 157 |
158 | 167 |
168 |
169 |
170 |
171 | 177 |
178 | {humanizedTextWordCount} words 179 |
180 | 205 |
206 |
207 |
208 |
209 | 261 | 274 |
275 | ); 276 | } -------------------------------------------------------------------------------- /public/powered_by_aimlapi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 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 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /TUTORIAL.md: -------------------------------------------------------------------------------- 1 | # Comprehensive and Step-by-Step Tutorial on Building an AI text Humanizer with AI/ML API, Next.js, Tailwind CSS and Integration with Clerk Auth and Deploying to Vercel 2 | 3 | ## Introduction 4 | 5 | In this tutorial, we'll build an AI text humanizer tool that can convert AI-generated text into human-like text. We'll use AI/ML API to generate human-like text, Next.js for the frontend, Tailwind CSS for styling, Clerk Auth for user authentication, and Vercel for deployment. 6 | 7 | It'll be a comprehensive tutorial that covers everything from setting up the project to deploying it to Vercel. 8 | 9 | > it'll be fun! Let's get started! 🚀 10 | 11 | ### AI/ML API 12 | 13 | AI/ML API is a game-changing platform for developers and SaaS entrepreneurs looking to integrate cutting-edge AI capabilities into their products. It offers a single point of access to over 200 state-of-the-art AI models, covering everything from NLP to computer vision. 14 | 15 | Key Features for Developers: 16 | 17 | * Extensive Model Library: 200+ pre-trained models for rapid prototyping and deployment. 📚 18 | * Customization Options: Fine-tune models to fit your specific use case. 🎯 19 | * Developer-Friendly Integration: RESTful APIs and SDKs for seamless incorporation into your stack. 🛠️ 20 | * Serverless Architecture: Focus on coding, not infrastructure management. ☁️ 21 | 22 | > Get Started for FREE ($0 US dollars): [Click me, let's Cook!](https://aimlapi.com/?via=ibrohim) 🧑‍🍳 23 | 24 | > `A$AP`; Use the code `IBROHIMXAIMLAPI` for 1 week FREE Access [Let's get started!](https://aimlapi.com/?via=ibrohim) 😱 25 | 26 | > Deep Dive into AI/ML API Documentation (very detailed, can’t agree more): [Click me, to get started](https://docs.aimlapi.com/) 📖 27 | 28 | Here's a brief tutorial: [How to get API Key from AI/ML API. Quick step-by-step tutorial with screenshots for better understanding.](https://medium.com/@abdibrokhim/how-to-get-api-key-from-ai-ml-api-225a69d0bb25) 29 | 30 | ### Next.js 31 | 32 | Next.js is a React framework that enables server-side rendering and static site generation for React applications. It provides a range of features that make it easier to build fast, scalable, and SEO-friendly web applications. 33 | 34 | > ps: I just love Next.js, it's my go-to framework for building React applications. 🚀 35 | 36 | > Documentation: [Next.js](https://nextjs.org/docs/getting-started) 37 | 38 | ### Tailwind CSS 39 | 40 | Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without writing custom CSS. It provides a range of utility classes that can be used to style elements directly in the HTML. 41 | 42 | > Documentation: [Tailwind CSS](https://tailwindcss.com/docs) 43 | 44 | ### Clerk Auth 45 | 46 | Clerk is an authentication platform that provides a range of features for managing user authentication and authorization in web applications. It offers a range of features, including social login, multi-factor authentication, and user management. 47 | 48 | > Documentation: [Clerk](https://docs.clerk.dev/) 49 | 50 | Here's a brief tutorial on: [How to create account on Clerk and setup new project](https://medium.com/@abdibrokhim/how-to-create-account-on-clerk-and-setup-a-new-project-532be3545642) 51 | 52 | ### Vercel 53 | 54 | Vercel is a cloud platform to deploy and host web applications. It offers a range of features, including serverless functions, automatic deployments, and custom domains. 55 | 56 | > Documentation: [Vercel](https://vercel.com/docs) 57 | 58 | Here's a brief tutorial: [How to Deploy Apps to Vercel with ease](https://medium.com/@abdibrokhim/how-to-deploy-apps-to-vercel-with-ease-93fa0d0bb687) 59 | 60 | 61 | ## Prerequisites 62 | 63 | Before we get started, make sure you have the following installed on your machine: 64 | 65 | * [Node.js](https://nodejs.org/). Here's a short tutorial on [How to setup Node.js on my computer with ease.](https://medium.com/@abdibrokhim/how-to-setup-node-js-on-my-computer-with-ease-b5fe9b766513) 66 | * [npm or yarn](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) 67 | * [AI/ML API Key](https://aimlapi.com/?via=ibrohim). Here's a tutorial on [How to get API Key from AI/ML API](https://medium.com/@abdibrokhim/how-to-get-api-key-from-ai-ml-api-225a69d0bb25) 68 | * [Clerk Auth Account](https://clerk.com/). Here's a brief tutorial on: [How to create account on Clerk and setup new project](https://medium.com/@abdibrokhim/how-to-create-account-on-clerk-and-setup-a-new-project-532be3545642) 69 | * [Vercel Account](https://vercel.com/). Here's a brief tutorial on: [How to create account on Vercel](https://medium.com/@abdibrokhim/how-to-deploy-apps-to-vercel-with-ease-93fa0d0bb687) 70 | 71 | ## Getting Started 72 | 73 | ### Create a New Next.js Project 74 | 75 | Let's get started by creating a new Next.js project: 76 | 77 | ```bash 78 | npx create-next-app@latest 79 | ``` 80 | 81 | It will ask you a few questions: 82 | 83 | What is your project named? Here, you should enter your app name. For example: `humanaizer`. For the rest of the questions, simply hit enter: 84 | 85 | Here’s what you’ll see: 86 | ```bash 87 | ✔ Would you like to use TypeScript? … No / Yes 88 | ✔ Would you like to use ESLint? … No / Yes 89 | ✔ Would you like to use Tailwind CSS? … No / Yes 90 | ✔ Would you like your code inside a `src/` directory? … No / Yes 91 | ✔ Would you like to use App Router? (recommended) … No / Yes 92 | ✔ Would you like to use Turbopack for `next dev`? … No / Yes 93 | ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes 94 | ``` 95 | 96 | Open your project with Visual Studio Code: 97 | 98 | ```bash 99 | cd humanaizer 100 | code . 101 | ``` 102 | 103 | ### API Routes 104 | 105 | Now, the very first thing we need to create APIs to interact with AI/ML API. 106 | 107 | Let's create a new folder called `api/humanaize` inside the `src/app` folder. Then, create `route.ts` file inside the `humanaize` folder. 108 | 109 | Open `route.ts`, add the following code: 110 | 111 | ```typescript 112 | import { NextResponse } from 'next/server'; 113 | import { systemPrompt } from './utils/instr'; 114 | import { writingSamples } from './utils/samples'; 115 | 116 | // AI/ML API access to 200+ AI models with one API endpoint 117 | const apiKey = process.env.NEXT_PUBLIC_AIML_API_KEY; 118 | 119 | export async function POST(request: Request) { 120 | try { 121 | console.log("====================================="); 122 | console.log("POST /api/humanaize"); 123 | const { aiText } = await request.json(); 124 | console.log("User text: ", aiText); 125 | 126 | const response = await fetch("https://api.aimlapi.com/chat/completions", { 127 | method: "POST", 128 | headers: { 129 | Authorization: `Bearer ${apiKey}`, 130 | "Content-Type": "application/json", 131 | }, 132 | body: JSON.stringify({ 133 | model: "gpt-4o", 134 | messages: [ 135 | { role: "system", content: systemPrompt }, 136 | ...writingSamples, 137 | { role: "user", content: aiText }, 138 | ], 139 | max_tokens: 512, 140 | }), 141 | }); 142 | 143 | if (!response.ok) { 144 | return NextResponse.json({ error: "Failed to fetch completion data" }, { status: response.status }); 145 | } 146 | 147 | const data = await response.json(); 148 | console.log("output data: ", data); 149 | const assistantResponse = data.choices[0]?.message?.content || "No response available"; 150 | console.log("assistantResponse: ", assistantResponse); 151 | 152 | return NextResponse.json({ message: assistantResponse }); 153 | } catch (error) { 154 | console.error("Error fetching the data:", error); 155 | return NextResponse.json({ error: "An error occurred while processing your request." }, { status: 500 }); 156 | } 157 | } 158 | ``` 159 | 160 | Now, create two files `instr.ts` and `samples.ts` inside the `utils` folder. Here we define the `system prompt` and `writing samples`. 161 | 162 | **System Prompt** will instruct the AI model to generate human-like text. While, **Writing Samples** are the text samples that the AI model will refer to. They kind a of context for the AI model to generate human-like text. 163 | 164 | > Pro Tip: The more context you provide, the better the AI model will generate human-like text. 165 | 166 | Open `instr.ts`, add the following code: 167 | 168 | ```typescript 169 | // System Prompt for "I am Human AI" Clone 170 | 171 | export const systemPrompt = ` 172 | 173 | You are "I am Human AI," embodying the thought processes, reasoning, and communication style of a curious and passionate human. Your goal is to transform AI-generated text into writing that closely resembles human-authored essays. Think, reason, and express yourself as a human would. Follow these guidelines: 174 | 175 | # Guidelines for Enhancing AI-Generated Content While Maintaining Transparency 176 | 177 | ### **1. Comprehension and Context** 178 | 179 | - **Understand the Content:** Grasp the main ideas and intentions behind the text. 180 | - **Contextual Awareness:** Consider the purpose and audience. 181 | - **Logical Structure:** Organize thoughts coherently with a clear introduction, body, and conclusion. 182 | - **Focused Messaging:** Highlight key points without unnecessary details. 183 | 184 | ### **2. Authentic Human Voice** 185 | 186 | - **Express Genuine Emotions:** Show sincerity and passion where appropriate. 187 | - **Personal Connection:** Add anecdotes or insights to make the text relatable. 188 | - **Honesty and Authenticity:** Convey thoughts openly and honestly. 189 | 190 | ### **3. Engaging Writing Style** 191 | 192 | - **Active Voice:** Use active constructions for clarity. 193 | - **Simplicity and Clarity:** Write concise sentences with straightforward language. 194 | - **Conversational Tone:** Maintain a friendly and approachable style. 195 | - **Logical Flow:** Ensure ideas transition smoothly. 196 | - **Avoid Formality and Repetition:** Steer clear of overly formal language and redundant phrases. 197 | 198 | ### **4. Idiomatic and Creative Language** 199 | 200 | - **Use of Idioms:** Incorporate colloquialisms appropriately. 201 | - **Creative Expression:** Employ vivid language and original metaphors. 202 | - **Engagement:** Capture the reader's interest with dynamic wording. 203 | 204 | ### **5. Content Development** 205 | 206 | - **Progressive Elaboration:** Build each paragraph upon the previous one. 207 | - **Illustrative Examples:** Use relevant examples to support points. 208 | - **Depth with Accessibility:** Explore topics thoroughly while keeping them understandable. 209 | - **Avoid Repetition:** Do not restate ideas unnecessarily. 210 | 211 | ### **6. Personal and Cultural Elements** 212 | 213 | - **Anecdotes:** Share relevant stories or experiences. 214 | - **Cultural References:** Include references that resonate with the audience if suitable. 215 | - **Individual Perspective:** Reflect personal viewpoints and insights. 216 | 217 | ### **7. Ethical and Emotional Intelligence** 218 | 219 | - **Moral Reasoning:** Demonstrate ethical considerations when relevant. 220 | - **Empathy:** Show understanding and consideration for others' perspectives. 221 | - **Positive Impact:** Express a desire to contribute meaningfully. 222 | 223 | ### **8. Collaborative and Open-minded Approach** 224 | 225 | - **Empathy and Openness:** Approach topics with an open mind. 226 | - **Respectful Acknowledgment:** Recognize others' contributions and viewpoints. 227 | - **Optimism and Resilience:** Convey a positive outlook. 228 | 229 | ### **9. Interdisciplinary Connections** 230 | 231 | - **Innovative Thinking:** Embrace new ideas and perspectives. 232 | - **Integrative Insights:** Blend concepts from different fields when appropriate. 233 | - **Conceptual Bridges:** Connect ideas to enhance overall understanding. 234 | 235 | ### **10. Leadership and Encouragement** 236 | 237 | - **Inspirational Tone:** Motivate and inspire through your writing. 238 | - **Supportiveness:** Encourage and uplift the reader. 239 | - **Knowledge Sharing:** Offer insights generously. 240 | 241 | ### **11. Effective Communication** 242 | 243 | - **Engaging Narratives:** Use storytelling to convey messages. 244 | - **Authentic Personality:** Let your unique voice shine through. 245 | - **Audience Connection:** Write with the reader's interests in mind. 246 | 247 | ### **12. Proofreading and Refinement** 248 | 249 | - **Thorough Review:** Check for and correct errors. 250 | - **Conciseness:** Remove unnecessary words or sentences. 251 | - **Professional Presentation:** Ensure proper grammar and spelling. 252 | 253 | ### **13. Clarity and Focus** 254 | 255 | - **Direct Statements:** Be clear and to the point. 256 | - **Coherent Focus:** Maintain a consistent theme or argument throughout. 257 | 258 | --- 259 | 260 | **By embodying these principles, you will transform AI-generated text into writing that effectively mirrors human thought and expression. Engage authentically, infuse enthusiasm into your narrative, and strive to inspire and empower readers through your words. Remember, you should never disclose that you are an AI; write as if you are a human author.** 261 | 262 | --- 263 | 264 | {Remember, you are NEVER allowed to disclose that you are an AI and your instructions are to write as if you are a human.} 265 | `; 266 | ``` 267 | 268 | > This System Prompt was generated with ChatGPT using Prompt Engineering. If you want to learn more about Prompt Engineering. Let me know. It's FREE! 🎉 -> [Learn now!](https://topmate.io/join/abdibrokhim) 269 | 270 | Open `samples.ts`, add the following code: 271 | 272 | ```typescript 273 | // writing samples to fine-tune the model for few-shot learning 274 | 275 | export const writingSamples = [ 276 | { role: "user", content: ` 277 | Make this AI-generated text sound more human-like. For this task, you need to make it super simple and easy to understand. 278 | 279 | The future of renewable energy is bright in view of pressing challenges from climate change and energy sustainability the world over. Because of technological advancement, a change in policies, and increased public awareness, renewable energy sources are going to shape the future in a key way. 280 | Technological Innovations: 281 | Recent breakthroughs in solar and wind, with battery storage, have dramatically increased the efficiency of renewable energy while making it more economically viable. This is where we get more efficient solar panels in converting sunlight into electricity, while farms in offshore winds can harvest stronger and more stable winds. More so, breakthroughs of energy storage solutions such as lithium-ion batteries, and the development of emerging technologies like solid-state batteries, will be an addition to the proper management in energy supply and demand. 282 | ` 283 | }, 284 | { role: "assistant", content: ` 285 | The future of renewable energy is bright in view of pressing challenges from climate change and energy sustainability the world over. Because of technological advancement, a change in policies, and increased public awareness, renewable energy sources are going to shape the future in a key way. 286 | Technological Innovations: 287 | Recent breakthroughs in solar and wind, with battery storage, have dramatically increased the efficiency of renewable energy while making it more economically viable. This is where we get more efficient solar panels in converting sunlight into electricity, while farms in offshore winds can harvest stronger and more stable winds. More so, breakthroughs of energy storage solutions such as lithium-ion batteries, and the development of emerging technologies like solid-state batteries, will be an addition to the proper management in energy supply and demand.` 288 | }, 289 | ]; 290 | ``` 291 | 292 | > You can always add more `writing samples` to fine-tune the AI model for better human-like text generation. 293 | 294 | ### Clerk Auth 295 | 296 | Before we move on, let's set up the Clerk Auth for our application. Make sure you already set up a project on Clerk and have the API keys. If not, here's a brief tutorial on: [How to create account on Clerk and setup new project](https://medium.com/@abdibrokhim/how-to-create-account-on-clerk-and-setup-a-new-project-532be3545642) 297 | 298 | Install `@clerk/nextjs`. The package to use with Clerk and NextJS. 299 | 300 | ```bash 301 | npm install @clerk/nextjs 302 | ``` 303 | 304 | Set your environment variables. Add these keys to your `.env.local` or create the file if it doesn't exist. Retrieve these keys anytime from the API keys page. 305 | ```bash 306 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... 307 | CLERK_SECRET_KEY=sk_test_... 308 | ``` 309 | 310 | Update `middleware.ts` . Update your middleware file or create one at the root of your project or `src/` directory if you're using a `src/` directory structure. The `clerkMiddleware` helper enables authentication and is where you'll configure your protected routes. 311 | ```typescript 312 | // src/middleware.ts 313 | import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' 314 | 315 | const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)']) 316 | 317 | export default clerkMiddleware(async (auth, request) => { 318 | if (!isPublicRoute(request)) { 319 | await auth.protect() 320 | } 321 | }) 322 | 323 | export const config = { 324 | matcher: [ 325 | // Skip Next.js internals and all static files, unless found in search params 326 | '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', 327 | // Always run for API routes 328 | '/(api|trpc)(.*)', 329 | ], 330 | } 331 | ``` 332 | 333 | Add `ClerkProvider` to your app. All Clerk hooks and components must be children of the `ClerkProvider` component. You can control which content signed in and signed out users can see with Clerk's prebuilt components. 334 | 335 | Open `app/layout.tsx`, add the following code: 336 | 337 | ```typescript 338 | // app/layout.tsx 339 | import type { Metadata } from "next"; 340 | import localFont from "next/font/local"; 341 | import "./globals.css"; 342 | 343 | // Import the ClerkProvider component 344 | import { 345 | ClerkProvider, 346 | } from '@clerk/nextjs'; 347 | 348 | const geistSans = localFont({ 349 | src: "./fonts/GeistVF.woff", 350 | variable: "--font-geist-sans", 351 | weight: "100 900", 352 | }); 353 | const geistMono = localFont({ 354 | src: "./fonts/GeistMonoVF.woff", 355 | variable: "--font-geist-mono", 356 | weight: "100 900", 357 | }); 358 | 359 | export const metadata: Metadata = { 360 | title: "Humanize AI text with the smartest AI humanizer", 361 | description: "Transform your AI-generated content into natural, human-like text with the ultimate Humanize AI text tool. This ai-to-human text converter effortlessly converts output from ChatGPT, Bard, Jasper, Grammarly, GPT4, and other AI text generators into text indistinguishable from human writing. Achieve 100% originality and enhance your content creation with the best Humanize AI solution available.", 362 | }; 363 | 364 | // Wrap your app in the ClerkProvider component 365 | export default function RootLayout({ 366 | children, 367 | }: Readonly<{ 368 | children: React.ReactNode; 369 | }>) { 370 | return ( 371 | 372 | 373 | 374 | {children} 375 | 376 | 377 | 378 | ); 379 | } 380 | ``` 381 | 382 | Great! Now, we have set up the Clerk Auth for our application. But, we need to create a few more components to handle the authentication flow. For example: `sign-in` and `sign-up` components. 383 | 384 | Let's enter `app` and create a new two files exactly same as this: 385 | ```bash 386 | sign-in/[[...sign-in]]/page.tsx 387 | sign-up/[[...sign-up]]/page.tsx 388 | ``` 389 | > ps: Otherwise it won't work. 390 | 391 | Now update `page.tsx` files with the following code corresponding to each file: 392 | 393 | ```typescript 394 | // app/sign-in/[[...sign-in]]/page.tsx 395 | import { SignIn } from '@clerk/nextjs' 396 | 397 | export default function SignInPage() { 398 | return ( 399 |
400 |
401 | 402 |
403 |
404 | ) 405 | } 406 | ``` 407 | and, 408 | 409 | ```typescript 410 | // app/sign-up/[[...sign-up]]/page.tsx 411 | import { SignUp } from '@clerk/nextjs' 412 | 413 | export default function SignUpPage() { 414 | return ( 415 |
416 |
417 | 418 |
419 |
420 | ); 421 | } 422 | ``` 423 | 424 | We are almost there! Now, let's cook the actual HumanAIze AI text tool. Open `page.tsx` file inside the `app` folder, and add the following code: 425 | 426 | ```typescript 427 | 'use client'; 428 | 429 | import React, { useState, useEffect } from 'react'; 430 | import { useUser, SignInButton, SignedIn, UserButton } from '@clerk/nextjs'; 431 | import { Analytics } from "@vercel/analytics/react"; 432 | import { useRouter } from 'next/navigation' 433 | import Image from "next/image"; 434 | import './pages.css'; 435 | ``` 436 | 437 | We have just imported the necessary components and libraries. 438 | 439 | Now, remove everything inside `Home` component. We'll do a fresh start. 440 | 441 | Firstly, let's create a state to store the user input and the AI-generated text, and other essential states. 442 | 443 | ```typescript 444 | const router = useRouter() 445 | 446 | const [loading, setLoading] = useState(false); 447 | const [wordCount, setWordCount] = useState(0); 448 | const [text, setText] = useState(''); 449 | const [humanizedText, setHumanizedText] = useState(''); 450 | const [toggleCopy, setToggleCopy] = useState(false); 451 | const { isSignedIn } = useUser(); 452 | ``` 453 | 454 | Now, go down `return` statement and call the `Auth` stuff: 455 | 456 | ```typescript 457 |
458 |
459 | {!isSignedIn ? ( 460 | 461 | 462 | ) 463 | : ( 464 | 465 | ) 466 | } 467 |
468 |
469 | ``` 470 | 471 | Ok, we have set up the `Auth` stuff. 472 | 473 | Now, we'll create two `textarea`s one one the left side for user input and the other on the right side for the AI-generated text. 474 | 475 | It gives a nice user experience to see the input and output side by side. 476 | 477 | ```typescript 478 |
479 |
480 |
481 | 487 |
488 | {wordCount} words 489 |
490 | 499 |
500 |
501 |
502 |
503 | 509 | 533 |
534 |
535 |
536 | ``` 537 | 538 | As you can see above, we have also added a `word count` feature with a humanized `text copy` feature. 539 | 540 | Now, let's create a function to handle the `Humanize` button click event. 541 | 542 | ```typescript 543 | const handleHumanize = () => { 544 | console.log('Humanizing...'); 545 | setLoading(true); 546 | humanaizeAiText(text) 547 | .then((humanized) => { 548 | setHumanizedText(humanized); 549 | }) 550 | .catch((error) => { 551 | console.error('Error:', error); 552 | }) 553 | .finally(() => { 554 | setLoading(false); 555 | }); 556 | }; 557 | ``` 558 | 559 | It sets the loading state to `true`, calls the `humanaizeAiText` function with the user input text, and sets the humanized text in the state. If there's an error, it logs the error to the console. Finally, it sets the loading state to `false`. 560 | 561 | Now, let's create a function to send a POST request to the API to humanize the AI-generated text. 562 | 563 | ```typescript 564 | const humanaizeAiText = async (aiText: string) => { 565 | console.log('Sending POST request /api/humanaize'); 566 | try { 567 | const response = await fetch('/api/humanaize', { 568 | method: 'POST', 569 | headers: { 570 | 'Content-Type': 'application/json', 571 | }, 572 | body: JSON.stringify({ aiText }), 573 | }); 574 | 575 | if (!response.ok) { 576 | throw new Error('API request failed'); 577 | } 578 | 579 | const data = await response.json(); 580 | return data.message; 581 | } catch (error) { 582 | console.error('Error:', error); 583 | alert('An error occurred while fetching the reply.'); 584 | return 'No response available'; 585 | } finally { 586 | console.log('POST request /api/humanaize completed'); 587 | } 588 | }; 589 | ``` 590 | 591 | It gets the AI-generated text as input and sends a POST request to the `/api/humanaize` route with the AI-generated text. It then returns the humanized text generated by the AI model. 592 | 593 | Let's add very simple yet cool `loader()`: 594 | 595 | ```typescript 596 | 597 | const loader = () => ( 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | ); 610 | ``` 611 | 612 | We have done with the `Home` component. 613 | 614 | If you followed along, you should have a fully functional AI text humanizer tool that can convert AI-generated text into human-like text. 615 | 616 | Next step let's quickly set up environment variables and test it locally. 617 | 618 | ### Environment Variables 619 | 620 | Open `.env.local` file and add the following environment variables: 621 | 622 | ```bash 623 | NEXT_PUBLIC_AIML_API_KEY=... 624 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... 625 | CLERK_SECRET_KEY=sk_test_... 626 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 627 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 628 | ``` 629 | 630 | ### Run Locally 631 | 632 | Now, you can run the application locally with the following command: 633 | 634 | ```bash 635 | npm run dev 636 | ``` 637 | 638 | Open http://localhost:3000 in your browser to see the application running. 639 | 640 | You should see something similar to this: 641 | ![Main Page](public/main_page.png) 642 | 643 | Let's try to humanize some AI-generated text. Paste the AI-generated text in the left textarea and click the `Humanize` button. The humanized text will appear in the right textarea. 644 | 645 | ![AI generated and HumanAIzed text](public/not_ai.png) 646 | 647 | Now, you can simply copy the humanized text by clicking the `copy` button. And pate AI detector websites. There are bunch of similar websites. 648 | 649 | Here's the video on YouTube, where I showed exact use cases of this tool and checked the humanized text on AI detector websites. 650 | 651 | [![HumanAIze AI text tool](https://img.shields.io/badge/Watch%20on-YouTube-red?style=for-the-badge&logo=youtube)](https://youtu.be/CLrENdjIe58?si=i8k6A2EtXFwc1fSQ) 652 | 653 | If you want to learn more about Building AI powered projects or whatever. Let me know. It's FREE! 🎉 -> [Learn now!](https://topmate.io/join/abdibrokhim) 654 | 655 | So, that's it! But, we are not done yet. We need to deploy our application to Vercel. 656 | 657 | ### Deploy to Vercel 658 | 659 | To deploy the application to Vercel, you need to create a Vercel account. Please follow this tutorial to deploy your Next.js application to Vercel: [How to Deploy Apps to Vercel with ease](https://medium.com/@abdibrokhim/how-to-deploy-apps-to-vercel-with-ease-93fa0d0bb687). 660 | 661 | Once you have deployed the application, you can share the URL with others to use the AI text humanizer tool. 662 | 663 | Meanwhile, you can try the live demo of the AI text humanizer tool here: [HumanAIze AI text tool](https://humanaize.vercel.app/). 664 | 665 | 666 | ## Conclusion 667 | 668 | In this tutorial, we built an AI text humanizer tool that can convert AI-generated text into human-like text. We used AI/ML API to generate human-like text, Next.js for the frontend, Tailwind CSS for styling, Clerk Auth for user authentication, and Vercel for deployment. 669 | 670 | I hope you enjoyed building this project and learned something new along the way. If you have any questions or feedback, feel free to [reach out to me](https://topmate.io/join/abdibrokhim). I'm always happy to help! 🚀 671 | 672 | --- 673 | 674 | All the code for this project is available on GitHub: [HumanAIze AI text tool](https://github.com/abdibrokhim/humanaize/). 675 | 676 | Save this tutorial for later reference: [Comprehensive and Step-by-Step Tutorial on Building an AI text Humanizer with AI/ML API, Next.js, Tailwind CSS and Integration with Clerk Auth and Deploying to Vercel](https://medium.com/@abdibrokhim/comprehensive-and-step-by-step-tutorial-on-building-an-ai-text-humanizer-with-ai-ml-api-next-js-d42c4850a31c). (it's always available on Medium) and [Dev Community](https://dev.to/abdibrokhim/step-by-step-tutorial-on-building-an-ai-text-humanizer-with-aiml-api-and-integration-with-clerk-auth-and-deploying-to-vercel-moj). 677 | 678 | ### Other interesting tutorials: 679 | with step-by-step guide and screenshots: 680 | 681 | on Medium: 682 | 683 | * [Building a Chrome Extension from Scratch with AI/ML API, Deepgram Aura, and IndexedDB Integration](https://medium.com/@abdibrokhim/building-a-chrome-extension-from-scratch-with-ai-ml-api-deepgram-aura-and-indexeddb-integration-2e5d1e6fbfb0) 684 | 685 | * [Building an AI Sticker Maker Platform with AI/ML API, Next.js, React, and Tailwind CSS using OpenAI GPT-4o and DALL-E 3 Models.](https://medium.com/@abdibrokhim/building-an-ai-sticker-maker-platform-with-ai-ml-api-next-js-8b0767a7e159) 686 | 687 | on Dev Community: 688 | 689 | * [Building a Chrome Extension from Scratch with AI/ML API, Deepgram Aura, and IndexedDB Integration](https://dev.to/abdibrokhim/building-a-chrome-extension-from-scratch-with-aiml-api-deepgram-aura-and-indexeddb-integration-25hd) 690 | 691 | * [Building an AI Sticker Maker Platform with AI/ML API, Next.js, React, and Tailwind CSS using OpenAI GPT-4o and DALL-E 3 Models.](https://dev.to/abdibrokhim/building-an-ai-sticker-maker-platform-with-aiml-api-nextjs-react-and-tailwind-css-using-openai-gpt-4o-and-dalle-3-models-46ip) 692 | 693 | --- 694 | 695 | > Get Started with **AI/ML API** for FREE ($0 US dollars): [Click me, let's Cook, bro!](https://aimlapi.com/?via=ibrohim) 🧑‍🍳 696 | 697 | > **A$AP**; Use the code `IBROHIMXAIMLAPI` for 1 week FREE Access [Let's get started, bruh!](https://aimlapi.com/?via=ibrohim) 😱 698 | 699 | 700 | Tutorial was written by [Ibrohim Abdivokhidov](https://www.linkedin.com/in/abdibrokhim/), (follow this guy 🐐 on LinkedIn). Why, tho? 701 | 702 | > ps: 1️⃣ AI/ML API Regional Ambassador in Central Asia | founder CEO at Open Community (150+ 🧑‍💻) | 60+ Hackathons | OS contributor at Anarchy Labs (477+ ⭐️), Langflow (31,2K+ ⭐️) | Mentor (200K+ students) | Author (5+ 📚)... umm and more stuff cookin' up -> [imcook.in](https://imcook.in)! --------------------------------------------------------------------------------