Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Essential AI Toolkit for Journalists and Content Creators</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Simple search functionality --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const searchInput = document.getElementById('search'); | |
| const cards = document.querySelectorAll('.tool-card'); | |
| searchInput.addEventListener('input', function() { | |
| const searchTerm = this.value.toLowerCase(); | |
| cards.forEach(card => { | |
| const content = card.textContent.toLowerCase(); | |
| if (content.includes(searchTerm)) { | |
| card.style.display = 'block'; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold mb-4">The Essential AI Toolkit for Journalists and Content Creators</h1> | |
| <!-- <p class="text-lg text-gray-600 mb-2"> | |
| Discover the best free AI tools for journalism and content creation | |
| </p> --> | |
| <p class="text-md text-gray-600 mb-2"> | |
| All the tools listed here are free to use and open-source!<br/> | |
| Have a favorite tool or need help with a specific use case? <a href="https://huggingface.co/spaces/JournalistsonHF/ai-toolkit/discussions" class="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">Share in the community tab!</a> </p> | |
| </header> | |
| <div class="relative mb-8"> | |
| <input | |
| id="search" | |
| type="text" | |
| placeholder="Search tasks, examples, or tools..." | |
| class="w-full p-3 pl-10 border rounded-lg" | |
| /> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-3 text-gray-400" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="11" cy="11" r="8"></circle> | |
| <line x1="21" y1="21" x2="16.65" y2="16.65"></line> | |
| </svg> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- Card 3: Transcribe audio --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Transcribe audio or video files</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4"> | |
| Transcribe your interviews or audio files directly on your computer—privately, with speaker identification. Click on video or words to jump to the relevant clip. Supports 100 different languages. | |
| </p> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/Xenova/whisper-speaker-diarization/" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Whisper Speaker Diarization | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/webml-community/whisper-large-v3-turbo-webgpu?v2=" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Whisper Large v3 Turbo | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 1: Scrape websites --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Scrape websites without coding</h2> | |
| <div class="ml-4"> | |
| Simply enter your prompt and website URL to receive a formatted result.</p><br/> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Download all press releases from a candidate</li> | |
| <li class="text-gray-600">Download a list of events</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/JournalistsonHF/ai-scraper" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| AI Scraper | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2: Analyze bias --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Analyze bias in image-generation tools</h2> | |
| <div class="ml-4"> | |
| Generate AI images of people in specific professions using different models.</p><br/> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Analyze how a candidate is represented by these tools</li> | |
| <li class="text-gray-600">Analyze how professions are represented in a specific country</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/JournalistsonHF/text-to-image-bias" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Text-to-image bias | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 4: Retouch images --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Edit images using just your words</h2> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Prepare images for video thumbnails and social media posts</li> | |
| <li class="text-gray-600">Remove distracting elements from photos</li> | |
| <li class="text-gray-600">Create visually consistent branding materials</li> | |
| <li class="text-gray-600">Enhance historical images for storytelling</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/finegrain/finegrain-object-eraser" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Finegrain Object Eraser | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/finegrain/finegrain-object-cutter" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Finegrain Object Cutter | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/fffiloni/text-guided-image-colorization" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Image Colorization | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/multimodalart/flux-fill-outpaint" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Flux Image Extender | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 5: Generate AI Images --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Generate AI Images in Various Styles</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Choose from dozens of unique styles and describe the image you want to create.</p> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/multimodalart/LoraTheExplorer" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| LoRA the Explorer | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 6: Extract from images --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Extract information from images and handwritten documents</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Upload a file and specify what you want to extract.</p> </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/Qwen/Qwen2-VL" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Qwen2-VL-Max | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 7: Extract from charts --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Extract information from charts</h2> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Example:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Generate a spreadsheet to conduct your own analysis.</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/ahmed-masry/ChartGemma" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| ChartGemma | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 8: Improve SEO --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Optimize an article for SEO</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Paste your content to receive recommendations.</p> </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/chat/assistant/66227594635ce17e1b021daf" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| SEO Assistant | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 9: Use AI in Google Sheets --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Use AI models in Google Sheets</h2> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Classify data</li> | |
| <li class="text-gray-600">Extract information</li> | |
| <li class="text-gray-600">Clean data</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/JournalistsonHF/huggingface-on-sheets" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| HuggingFace on Sheets | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 10: Code a web app --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Code a web app</h2> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Example:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Rapidly prototype and refine ideas.</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/Qwen/Qwen2.5-Coder-Artifacts" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Qwen2.5-Coder | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 11: Shotlist a video --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Shotlist a Video</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Upload your video to receive a detailed shot list of every scene. Compatible with VLC Video</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Shotlist a press conference</li> | |
| <li class="text-gray-600">Identify the different plans of a video</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/HuggingFaceTB/SmolVLM2-XSPFGenerator" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| VLC Highlight Generator | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 12: Chat with documents --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Chat with Documents</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Upload your document to the chatbot window and ask questions about it to the model. Your conversations are private.</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Analyze lengthy research papers</li> | |
| <li class="text-gray-600">Extract key insights from reports</li> | |
| <li class="text-gray-600">Summarize technical documents</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/chat/" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| HuggingChat with Qwen 2.5 72B | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 13: Extract information from websites --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Extract Information from Websites</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Create a new assistant with the model of your choice and add the website in the "domains search" or "specific links" boxes, depending on your needs.</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Research competitor content</li> | |
| <li class="text-gray-600">Create a custom knowledge base for your niche</li> | |
| <li class="text-gray-600">Stay updated on specific topics</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/chat/settings/assistants/new" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| HuggingChat Assistants | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 14: Create audio from text --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Create an Audio File from Text</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">A Text-to-Speech app that runs entirely in your browser, with no text size limitations. Licensed under Apache 2.0 (free for commercial use).</p><br/> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Create audio versions of articles</li> | |
| <li class="text-gray-600">Generate voiceovers for videos</li> | |
| <li class="text-gray-600">Produce accessibility content</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/Xenova/kokoro-web" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Kokoro Web | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 15: Create a podcast --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Create a Podcast from Text</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Generates audio conversations <em>à la</em> NotebookLM.</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Turn blog posts into podcast episodes</li> | |
| <li class="text-gray-600">Create conversational content from research</li> | |
| <li class="text-gray-600">Develop audio series from written content</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/ngxson/kokoro-podcast-generator" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| Podcast Generator | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 16: Choose best model --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Choose the best model</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">Evaluate open-source models on different benchmarks.</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Compare models for specific use cases</li> | |
| <li class="text-gray-600">Find the most efficient model for your needs</li> | |
| <li class="text-gray-600">Stay updated on the latest advancements</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard#/" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| OpenLLM Leaderboard | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 17: Convert graphic interface to data --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Convert graphic interface to data</h2> | |
| <div class="ml-4"> | |
| <p class="text-gray-600 mb-4">OmniParser is a screen parsing tool to convert general GUI screen to structured elements.</p> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Extract data from app screenshots</li> | |
| <li class="text-gray-600">Convert visual information to structured data</li> | |
| <li class="text-gray-600">Analyze interface designs</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/microsoft/OmniParser-v2" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| OmniParser V2 | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 18: Evaluate environmental footprint --> | |
| <div class="tool-card border rounded-lg p-6 bg-white shadow-sm hover:shadow-md transition-shadow"> | |
| <h2 class="text-xl font-bold mb-4">Evaluate the environmental footprint of a model</h2> | |
| <div class="ml-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">Examples:</h3> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li class="text-gray-600">Make sustainable AI choices</li> | |
| <li class="text-gray-600">Compare energy usage between models</li> | |
| <li class="text-gray-600">Report on AI sustainability</li> | |
| </ul> | |
| </div> | |
| <div class="mt-4 pt-4 border-t"> | |
| <h3 class="font-medium text-gray-700 mb-2">Recommended Tools:</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <a href="https://huggingface.co/spaces/AIEnergyScore/Leaderboard" target="_blank" rel="noopener noreferrer" class="tool-link"> | |
| AI Energy Score | |
| <svg xmlns="http://www.w3.org/2000/svg" class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> |