# Grammicon - AI Emoji Search & Unicode Font Generator ## About Grammicon ## The Experiment: AI at the Edge Grammicon began with a simple but ambitious question: **Can we bring the power of Large Language Models (LLMs) directly to the user's browser, without relying on expensive and privacy-invasive cloud servers?** In a world where "AI" usually means "sending your data to a remote data center," we wanted to prove that powerful, intelligent tools could run entirely on your own device—whether that's a high-end laptop or a standard mobile phone. ### The Proof of Concept The result of this experiment is what you see here today. Grammicon is a fully functional web application that demonstrates the viability of **Client-Side AI**. The success of this experiment is measured in real-world performance: * **Fast Initialization**: It takes only about **1 minute** to download and initialize the AI model on your first visit. * **Zero Latency**: Once loaded, the model runs instantly. There is no network lag because there is no network request. * **True Offline Capability**: After the initial load, you can turn off your Wi-Fi and the app will continue to function perfectly. ## Why Client-Side AI Matters Running AI locally on "edge devices" (your computer or phone) offers significant benefits over the traditional cloud-based approach: ### 1. Uncompromised Privacy When you use Grammicon, your data never leaves your device. Your search queries, your text drafts, and your preferences stay with you. There is no "cloud" to hack, and no server logs to track you. ### 2. Reliability & Accessibility Cloud services go down. Internet connections fail. Grammicon doesn't. By running locally, we ensure that your tools are always available, regardless of your connectivity status. This is especially crucial for users in areas with unstable internet access. ### 3. Sustainability Cloud computing consumes massive amounts of energy. By offloading the computation to your device, we distribute the energy cost and eliminate the need for massive, always-on server farms just to process simple requests. ## The Tools: Built for the Web While Grammicon started as a technical proof of concept, we wanted to build something that was actually *useful*. We leveraged this local AI capability to create a suite of tools designed for the modern web user. ### 1. Semantic Emoji Search Finding the right emoji used to mean scrolling through endless grids or remembering exact keywords. With our local AI model, Grammicon understands **meaning**. * **Search by Vibe**: Type "I'm feeling lucky" or "celebration time" and get relevant results. * **Multilingual**: The underlying model understands concepts, not just English keywords, making it accessible to a global audience. ### 2. Fonticon: Creative Text Styling Standing out on social media is hard. Fonticon allows you to transform standard text into eye-catching Unicode styles. * **Instant Conversion**: See your text transform in real-time as you type. * **Deep Customization**: Combine different font styles (Variants) with special marks (Diacritics) to create a look that is uniquely yours. ## Real-World Use Cases Grammicon is designed for anyone who communicates online: * **Social Media Managers**: Craft engaging bios and posts for Instagram, X (Twitter), and TikTok using unique fonts and perfectly matched emojis. * **Digital Marketers**: Create attention-grabbing headlines and ad copy that stops the scroll. * **Developers & Designers**: Quickly find the right assets for your UI without leaving your workflow. * **Privacy Advocates**: Enjoy the convenience of AI tools without sacrificing your personal data. ## The Technology Grammicon is built on the cutting edge of web technology. We use **Svelte** for a blazing-fast user interface and **Transformers.js** to run the AI models directly in the browser. This project stands as proof that the web platform is ready for the next generation of intelligent applications. ## User Guide ### Welcome to Grammicon! This guide walks you through the features of our two core tools: the **AI Emoji Search** and the **Fonticon Unicode Text Converter**. ## The Emoji Tool The Emoji Tool helps you browse, search, and collect emojis using artificial intelligence or traditional categories. ### Finding Emojis You have two primary ways to discover emojis: #### 1. AI-Powered Semantic Search The search bar at the top uses a **local AI model running directly in your browser** to understand the meaning behind your queries. * **Search by Vibe & Context**: Instead of matching exact keywords, search using descriptions of emotions, concepts, or settings (e.g. typing "chilly weather" or "feeling down"). * **Relevance Sorting**: Emojis display in descending order of similarity. The relevance percentage is shown at the top right of each card. * **Instant Copying**: Click any emoji card to copy it to your clipboard. It is also collected in the tray at the bottom of the page. * **Offline Privacy**: All search queries are processed locally inside a Web Worker. Your searches never leave your device. * **Clearing Search**: To browse all emojis again, simply clear the search input. #### 2. Filtering by Group & Subgroup For standard browsing, use the dropdown filters: 1. **Select Group**: Choose a broad category (e.g. "Smileys & Emotion", "Animals & Nature"). 2. **Select Subgroup**: Narrow down your selection (e.g. "face-smiling" or "animal-mammal"). Select "— All Subgroups —" to view the whole category. **💡 Tip:** Click the **Reset** (❌) button at any time to clear your search query, filters, and state. > [!NOTE] > **Compatibility Note**: Older operating systems (like Windows 10) might lack system support for newer Unicode emojis, displaying empty squares or question marks instead. This is an operating system limitation, not an app issue. ### Using and Sharing Emojis * **Click to Collect**: Clicking any emoji copies it and appends it to the **Editor** tray at the bottom. * **The Editor**: A scratchpad text area to construct your message, combine emojis, and adjust spacing. * **Share**: Click the **Share** button next to the editor to copy the entire message or send it using your device's native sharing overlay. ### Creating Shareable Links You can share pre-loaded search terms or filters by copying the URL from your browser's address bar. For example: - **Search for "cold"**: [https://grammicon.com/en/emojis?searchQuery=cold](https://grammicon.com/en/emojis?searchQuery=cold) - **Search for "snowman"**: [https://grammicon.com/en/emojis?searchQuery=snowman](https://grammicon.com/en/emojis?searchQuery=snowman) --- ## The Fonticon Tool The Fonticon Tool transforms plain text into stylized Unicode glyphs to make your bios, headlines, and posts stand out on social media platforms like Instagram, X (Twitter), TikTok, and Discord. ### How It Works 1. **Select a Style (Variant)**: Choose a Unicode style (e.g. `bold`, `italic`, `script`, `fraktur`, `double-struck`, `sans-serif`). 2. **Add Diacritics (Optional)**: Overlay characters with special accents or marks (like `underline`, `strikethrough`, or crosshatching). 3. **Type Your Text**: Enter text in the left input box, and see the styled output preview on the right in real-time. 4. **Copy & Share**: Click the copy button to copy the styled glyphs, ready to paste anywhere on the web. *Your selections and input are saved locally in your browser so they are ready for your next session.* ### Creating Shareable Links The URL updates in real-time as you type. You can share pre-styled text links with others: - **Circled "Hello World" with underline**: [https://grammicon.com/en/fonticon?variantKeyCurrent=circled&userInput=Hello%20World](https://grammicon.com/en/fonticon?variantKeyCurrent=circled&userInput=Hello%20World) **Important Notes:** 1. Font style variants work exclusively for English / Latin alphanumeric characters, while diacritics overlay successfully on most languages. 2. Not all combinations of variants and diacritics are visually compatible; experiment to find the cleanest look. --- ## Customizing Your Theme Personalize Grammicon's theme in the top-right corner of the header: * **Theme Palette (🎨)**: Click the palette icon to adjust your primary, secondary, and accent colors. Custom palettes are saved automatically in your browser.