DEV Community: Abu Taher Siddik

Stop Paying Subscription Fees: I Built a Unified "Bring Your Own Key" AI Chat Studio (Gemini + Claude + GPT-4)

Abu Taher Siddik — Wed, 17 Dec 2025 13:28:47 +0000

Like many of you, I have "subscription fatigue." I love using Claude for coding, GPT-4 for logic, and Gemini for creative brainstorming. But paying $20/month for each of them? That’s $60/month just to chat with bots.

Plus, I hated switching between three different tabs just to compare answers.

So, I built AI Chat Studio.

It’s a web-based, multi-model interface where you Bring Your Own Keys (BYOK). You pay the providers directly for only what you use (which is often pennies), and you get a unified, pro-level workspace for all of them.

Why I Built This (The Problem)

Most official chat interfaces have limitations:

Vendor Lock-in: You are stuck in their UI.
Privacy Concerns: Your data is often used for training by default on free tiers.
The "Tab Shuffle": Copy-pasting a prompt from ChatGPT to Claude to see who does it better is annoying.

The Solution: AI Chat Studio

I wanted a "Mission Control" for AI. A single dashboard where I can select a model, drop a file, speak a prompt, and get work done.

Key Features for Developers

Here is what makes it different from just using the official websites:

1. Multi-Model Support 🧠

Switching models is as easy as clicking a button. No page reloads.

Google: Gemini 2.5 Flash
Anthropic: Claude 3.5 Sonnet
OpenAI: GPT-4 Turbo
Open Source: Llama 3, Mistral AI, DeepSeek

2. Full Multimodal Support 🎤 📷

It’s not just text.

Voice-to-Text: I implemented real-time transcription so you can "talk" your code logic instead of typing it.
File Analysis: Upload docs, PDFs, or images. The AI "sees" the file and can summarize or extract code from screenshots.

3. Privacy & Security (BYOK) 🔒

This was a priority.

Your Keys, Your Control: You enter your API keys in the settings.
Client-Side Focus: The app acts as a bridge. You aren't paying a middleman subscription; you are paying the API providers directly (which is significantly cheaper for 90% of users).

4. Developer UX 🛠️

Code Highlighting: Proper syntax highlighting for code blocks.
Smart History: Searchable conversation history (organized by Today, This Week, Pinned).
Message Editing: Edit a prompt and regenerate the response in place—crucial for prompt engineering.

How to Try It

It’s live and free to use (you just need your API keys).

Go to AI Chat Studio.
Click Settings and paste your API key (e.g., from OpenAI or Anthropic).
Start chatting!

What's Next?

I'm actively working on adding more models and improving the "Agent" capabilities.

I’d love to hear your feedback.

ConnectHub: Modern Intranet Dashboard with CSS Art 🎨

Abu Taher Siddik — Sun, 06 Jul 2025 08:03:59 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I'm excited to share my submission for the CSS Art Challenge! ConnectHub is a modern intranet dashboard designed with a focus on clean aesthetics, smooth animations, and responsive design. This project showcases what's possible with modern CSS techniques while maintaining practical functionality.

Live Demo: ConnectHub Demo
GitHub Repository: ConnectHub Repository

Features

1. Modern Dashboard Layout

Responsive grid system
Clean, modern UI components
Interactive widgets and cards

2. Real-time Elements

Live UTC clock (YYYY-MM-DD HH:MM:SS)
Dynamic calendar
Activity feeds

3. Interactive Components

Dropdown menus
Notification system
User profile management

4. CSS Animations

Smooth transitions
Hover effects
Loading states
Timeline animations

Tech Stack

HTML5
CSS3 (Pure CSS, no frameworks)
Vanilla JavaScript
Font Awesome Icons

Setup Instructions

Clone the repository:

git clone https://github.com/imabutahersiddik/connecthub.git
cd connecthub

Project Structure:

connecthub/
├── assets/
│   └── logo.svg
├── index.html
├── styles.css
└── script.js

Open index.html in a modern web browser:

# If you have Python installed
python -m http.server 8000

# If you have Node.js installed
npx serve

Access the dashboard at http://localhost:8000

Screenshots

Dashboard View

Calendar & Events

Mobile View

CSS Highlights

Modern Card Design

.widget {
    background-color: var(--widget-bg);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.widget:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

Timeline Animation

.events-timeline::before {
    content: '';
    position: absolute;
    left: 4.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        var(--border-color) 0%,
        var(--border-color) 100%
    );
    opacity: 0.5;
}

Responsive Design

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
        gap: 1rem;
    }
}

Performance Optimizations

CSS Custom Properties for theme management
Optimized animations for performance
Lazy loading for images
Efficient DOM manipulation

Accessibility Features

ARIA labels
Semantic HTML
Keyboard navigation
High contrast support

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Future Improvements

Add dark mode toggle
Implement drag-and-drop for cards
Add more interactive widgets
Enhance mobile gestures

Contributing

Feel free to contribute to this project! Here's how:

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Acknowledgments

Thanks to Allah for the blessings and inspiration
Font Awesome for the beautiful icons
The dev.to community for the support

License

This project is licensed under the MIT License - see the LICENSE file for details.

Connect With Me

Remember to show some love if you found this helpful! 💖

css #webdev #javascript #design

Building an Islamic Prayer Times App with Modern Web Technologies

Abu Taher Siddik — Thu, 03 Jul 2025 17:43:59 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

Building an Islamic Prayer Times App 🕌

Project Overview

I've developed a modern web application that helps Muslims track their daily prayer times with an intuitive interface and real-time updates. The project combines several key technologies to create a seamless user experience.

Key Features

Real-time prayer time calculations based on location
Interactive modal system with smooth animations
Qibla direction compass
Dark mode support
Offline functionality
Location-based customization

Technical Implementation

1. Modern Modal System

One of the main challenges was creating a smooth, accessible modal system. Here's how we implemented it:

class PrayerTimesApp {
    showPrayerInfo(prayer, time) {
        const modal = document.getElementById('prayerModal');
        const info = this.prayerInfo[prayer];

        // Update modal content
        modal.querySelector('#modal-prayer-name').textContent = prayer;
        modal.querySelector('#modal-prayer-time').textContent = time;
        modal.querySelector('#modal-prayer-period')
             .textContent = info.time_description;

        // Show with animation
        modal.style.display = 'block';
        modal.offsetHeight; // Force reflow
        modal.classList.add('visible');

        // Trap focus for accessibility
        this.trapFocus(modal);
    }
}

The modal features a blurred backdrop and smooth animations:

.prayer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.prayer-modal-overlay.visible {
    opacity: 1;
}

2. Location-Based Features

Implementing accurate prayer times required precise location handling:

async updatePrayerTimes(coordinates) {
    try {
        const times = await this.fetchPrayerTimes(coordinates);
        this.renderPrayerTimes(times.data);
        this.updateQiblaDirection(coordinates);
        await this.updateLocationDisplay(coordinates);
    } catch (error) {
        this.handleError(error);
    }
}

3. Qibla Direction Compass

The Qibla compass was implemented using Canvas:

drawQiblaCompass(angle) {
    const canvas = document.getElementById('qibla-compass');
    const ctx = canvas.getContext('2d');
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw compass circle and direction pointer
    this.drawCompassCircle(ctx, centerX, centerY);
    this.drawDirectionPointer(ctx, centerX, centerY, angle);
}

Technical Challenges and Solutions

1. Modal Interaction Issues

Initially, the modal would close unexpectedly when users interacted with its content. We solved this by properly handling event propagation:

initializeModal() {
    const modal = document.getElementById('prayerModal');
    const modalContent = modal.querySelector('.modal-content');

    modalContent.addEventListener('click', (e) => {
        e.stopPropagation();
    });
}

2. Accurate Prayer Time Calculations

We integrated with the Aladhan API while implementing fallback calculations:

function getPrayerTimes($latitude, $longitude) {
    $date = date('d-m-Y');
    $url = "http://api.aladhan.com/v1/timings/$date?" . 
           "latitude=$latitude&longitude=$longitude&method=3";

    try {
        $response = file_get_contents($url);
        return json_decode($response, true);
    } catch (Exception $e) {
        return getFallbackTimes($latitude, $longitude);
    }
}

3. Cross-Browser Compatibility

Ensuring consistent animations and backdrop filters across browsers required careful CSS:

@supports not (backdrop-filter: blur()) {
    .prayer-modal-overlay {
        background: rgba(15, 23, 42, 0.9);
    }
}

Performance Optimizations

Efficient DOM Updates

renderPrayerTimes(data) {
    const container = document.getElementById('prayer-times');
    const fragment = document.createDocumentFragment();

    Object.entries(data.timings).forEach(([prayer, time]) => {
        fragment.appendChild(this.createPrayerCard(prayer, time));
    });

    container.innerHTML = '';
    container.appendChild(fragment);
}

Resource Loading

<link rel="preconnect" href="https://api.aladhan.com">
<link rel="dns-prefetch" href="https://api.aladhan.com">

Future Enhancements

Prayer notifications system
Multiple location profiles
Monthly prayer calendar view
Community prayer time sharing
Integration with local mosques

Lessons Learned

The importance of proper event handling in modal systems
Balancing feature richness with performance
Implementing graceful degradation for older browsers
Managing state in a growing application

Code Repository

The complete source code is available on GitHub: Prayer Times App

Team Members

Project Lead & Developer: @imabutahersiddik

Conclusion

Building this prayer times application was a journey in combining modern web technologies with practical utility. The project demonstrates how we can create meaningful applications while pushing the boundaries of web capabilities.

Acknowledgments

Special thanks to the Bolt team for providing the platform and inspiration for this project. The challenge helped shape this application into a more robust and user-friendly tool.

Project Status: Live Demo available at Prayer Times App

wlh #bolt #javascript #webdev

Automated Mobile Buying Research & Scheduling

Abu Taher Siddik — Mon, 16 Jun 2025 08:30:03 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I built an Automated Research and Insight Reporting workflow using Runner H that helps users find the best mobile devices available for purchase near their location. The system autonomously searches local and online retailers, gathers detailed specifications, prices, availability, and promotions, then summarizes and compares top options in a clear, concise report. Additionally, it recommends the optimal buying date based on market trends and automatically creates a calendar event to remind users when to make their purchase. This automation saves users hours of manual research and ensures they buy at the best time and place.

Demo

Screenshot of Runner H dashboard showing the workflow running
Generated Google Doc report with device comparisons and buying recommendations

You can also view the live Runner H prompt run here:

https://runner.hcompany.ai/chat/8a7f8a23-8ec7-48db-9a4a-546c865bb40e/share

How I Used Runner H

Runner H’s powerful multi-agent orchestration enabled me to:

Decompose the task into subtasks such as web scraping, data extraction, summarization, filtering by location, and calendar scheduling.
Integrate with external tools like Google Docs for report generation, Slack for notifications, and Google Calendar for scheduling purchase reminders.
Maintain context and memory across subtasks to ensure coherent, accurate summaries and consistent formatting.
Automate end-to-end execution so the entire research, reporting, and scheduling process happens autonomously on demand or on a recurring schedule.

To replicate this workflow:

Define your location and preferred mobile device brands or models in the prompt.
Connect your Google Docs, Slack, and Calendar accounts with Runner H.
Trigger the workflow manually or schedule it to run periodically.
Receive up-to-date, localized mobile buying reports with actionable calendar reminders.

Use Case & Impact

This solution is perfect for anyone looking to purchase a new mobile device without spending hours researching prices, specs, and deals. It benefits:

Consumers who want personalized, location-specific buying advice.
Tech enthusiasts tracking the best deals and newest models.
Retailers and sales teams who want to monitor competitor pricing and promotions locally.

By automating research, summarization, and scheduling, this workflow saves time, reduces decision fatigue, and helps users buy smarter and at the right time, maximizing savings and convenience.

Full Runner H Prompt for Automated Mobile Buying Research & Scheduling

1. Search the internet, local retailer websites, and online marketplaces for the latest mobile devices available for purchase near my location: [INSERT LOCATION].

2. Prioritize reputable sources such as Amazon, Best Buy, Walmart, local carrier stores (e.g., Verizon, AT&T), and popular price comparison sites.

3. Extract key details for each mobile device including: model name, specifications (camera, battery, processor, storage), price, availability, and any ongoing promotions or discounts.

4. Filter results to show devices available within a reasonable distance (e.g., 10-20 miles) or with local store pickup options.

5. Summarize and compare the top 5-10 mobile devices based on features, price, and user ratings.

6. Organize the findings into a clear, concise report with sections such as:
   - Best Value Phones
   - Latest Models
   - Budget Options
   - Special Deals Near You

7. Format the report as a Google Doc or Markdown file, including links to purchase pages.

8. Save the report to Google Drive (or Notion) and notify me via Slack or email with the report link.

9. Recommend the optimal buying date based on:
   - Upcoming new model release dates
   - Major sales events (Black Friday, Cyber Monday, Prime Day, Boxing Day)
   - Typical discount windows and pre-order periods

10. Automatically create a calendar event titled "Buy [Mobile Device Model]" on the recommended purchase date or within the best buying window, including:
    - Device model and key features
    - Estimated price or discount info
    - Links to preferred retailers
    - Reminder notification 1-2 days before the event

11. Schedule this workflow to run weekly or monthly to keep the report and calendar event updated.

Thank you to the Runner H team for this exciting challenge! I look forward to seeing how the community innovates with AI agents.

[Boost]

Abu Taher Siddik — Sun, 15 Jun 2025 00:13:14 +0000

Build a Powerful Semantic Knowledge Base CLI with MindsDB and Google Gemini 2.5 Flash

Abu Taher Siddik ・ Jun 15

#productivity #gemini #cli #database

Build a Powerful Semantic Knowledge Base CLI with MindsDB and Google Gemini 2.5 Flash

Abu Taher Siddik — Sun, 15 Jun 2025 00:11:58 +0000

Introduction

In today’s data-driven world, building intelligent systems that can understand, organize, and retrieve information semantically is a game-changer. Whether you’re powering customer support, knowledge management, or AI assistants, having a semantic knowledge base that can ingest your data and answer natural language queries is essential.

In this post, I’ll walk you through building a production-ready CLI tool that leverages MindsDB’s Knowledge Base capabilities combined with Google’s Gemini 2.5 Flash model for state-of-the-art embeddings and reranking. Plus, we’ll explore advanced features like asynchronous jobs, metadata handling, and MindsDB AI Tables for summarization and classification.

What is MindsDB Knowledge Base?

MindsDB Knowledge Base is an AI-powered layer on top of your data that enables semantic search, natural language querying, and AI-driven insights. It integrates with popular AI models to provide embeddings and reranking, turning your raw data into a searchable, intelligent knowledge graph.

Why Google Gemini 2.5 Flash?

Google’s Gemini 2.5 Flash model offers advanced reasoning, large context windows, and efficient performance, making it an excellent choice for semantic tasks. MindsDB now supports Gemini 2.5 Flash as a first-class AI engine, allowing you to build powerful knowledge bases without relying solely on OpenAI.

What You’ll Build

A CLI app that can:

Create and configure a MindsDB Knowledge Base with Gemini 2.5 Flash embeddings
Ingest CSV data asynchronously using MindsDB JOBs
Create semantic indexes asynchronously
Perform semantic search queries with metadata-aware SQL
Create and query MindsDB AI Tables for summarization, classification, and generation

Prerequisites

Python 3.8+
MindsDB Python SDK
Pandas
MindsDB Cloud account & API key
Google Gemini API key
CSV data file

Step 1: Setting Up the CLI App

I built the CLI tool in Python using the MindsDB SDK. It handles everything from engine creation to querying. Here’s a snippet showing how to create the Gemini engine:

def create_gemini_engine(self, engine_name, gemini_api_key):
    create_engine_sql = f"""
    CREATE ML_ENGINE {engine_name}
    FROM google_gemini
    USING api_key = '{gemini_api_key}';
    """
    self.client.query(create_engine_sql)

This registers the Gemini engine in MindsDB for use in knowledge bases.

Step 2: Creating the Knowledge Base

The knowledge base is created with Gemini 2.5 Flash as both the embedding and reranking model:

create_kb_sql = f"""
CREATE KNOWLEDGE_BASE {kb_name}
USING
embedding_model = {{
    "provider": "google_gemini",
    "engine": "{engine_name}",
    "model_name": "gemini-2-5-flash"
}},
reranking_model = {{
    "provider": "google_gemini",
    "engine": "{engine_name}",
    "model_name": "gemini-2-5-flash"
}},
metadata_columns = {metadata_columns},
content_columns = {content_columns},
id_column = '{id_column}';
"""
self.client.query(create_kb_sql)

Step 3: Ingesting Data with Jobs

To handle large datasets efficiently, data ingestion and index creation run asynchronously as MindsDB JOBs:

job = kb.insert(df, async_mode=True)
job.wait()

This approach ensures your CLI remains responsive and scalable.

Step 4: Semantic Search with Metadata

The CLI supports semantic queries with metadata-aware SQL, using window functions like LAST_VALUE() to retrieve the latest metadata per record:

SELECT id, content,
  LAST_VALUE(updated_at) OVER (PARTITION BY id ORDER BY updated_at ROWS BETWEEN UNBOUNDED PRECEDING AND UNBOUNDED FOLLOWING) AS latest_update,
  relevance_score
FROM kb_name
WHERE content LIKE ''
AND relevance_score >= 
ORDER BY relevance_score DESC
LIMIT ;

Step 5: AI Tables for Summarization and Classification

MindsDB AI Tables enable you to create tables that perform AI tasks such as summarization or classification on your data:

CREATE AI TABLE summary_table
AS SELECT content
FROM kb_name
PREDICT summary
USING task = 'summarization';

You can then query the AI Table to get AI-generated summaries or classifications.

How to Use the CLI Tool

Ingest data:

python kb_cli_advanced.py --api_key YOUR_MDB_API_KEY --gemini_api_key YOUR_GEMINI_API_KEY --kb_name my_kb --input_file data.csv

Search semantically:

python kb_cli_advanced.py --api_key YOUR_MDB_API_KEY --kb_name my_kb --query "reset password" --limit 5 --relevance_threshold 0.6

Create AI Table:

python kb_cli_advanced.py --api_key YOUR_MDB_API_KEY --create_ai_table --ai_table_name summary_table --source_table my_kb --task_type summarization --input_columns content --output_column summary

Query AI Table:

python kb_cli_advanced.py --api_key YOUR_MDB_API_KEY --query_ai_table --ai_table_name summary_table --limit 5

Conclusion

By combining MindsDB’s Knowledge Base with Google Gemini 2.5 Flash and advanced features like JOBs and AI Tables, you can build scalable, intelligent semantic search and AI applications with ease.

Feel free to check out the full source code and README on my GitHub repo. Happy coding!

References

From Data to Decisions: Automated Research Reporting Using Runner H AI Agents

Abu Taher Siddik — Fri, 13 Jun 2025 13:54:42 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I created an Automated Research and Insight Reporting workflow using Runner H that autonomously gathers the latest information on a specified topic from multiple trusted sources, summarizes key insights, categorizes findings, and compiles a well-structured report. The final report is automatically saved to Google Docs (or Notion) and shared with the team via Slack or email, complete with scheduled recurring updates.

This workflow solves the time-consuming and repetitive task of manual research and report generation, enabling professionals, researchers, and teams to stay informed effortlessly with up-to-date, curated insights delivered directly to their preferred platforms.

Demo

the workflow in Runner H dashboard, the generated report in Google Docs, and Slack notification.*

(If you have a video, embed it here using the markdown embed syntax)

How I Used Runner H

Runner H’s multi-agent orchestration capabilities were key to this workflow:

Multi-step task decomposition: I defined subtasks for web scraping, API querying, summarization, categorization, document generation, and notifications.
Integration with external tools: Connected Runner H to Google Docs for report creation, Slack for team notifications, and calendar apps for scheduling recurring reports.
Context-aware memory: Runner H maintained context across all subtasks, ensuring coherent summaries and consistent report formatting.
Autonomous execution: Once triggered, the workflow runs end-to-end without manual intervention, freeing users from repetitive research tasks.

Instructions to replicate:

Set your target research topic and preferred sources within the Runner H prompt.
Connect your Google Docs, Slack, and calendar accounts via Runner H integrations.
Trigger the workflow manually or schedule it to run automatically on a recurring basis.
Receive the summarized research report directly in your team’s Slack channel and Google Docs folder.

Use Case & Impact

This solution is ideal for:

Researchers and analysts who need to monitor fast-moving fields like AI, biotech, or finance.
Product managers and marketers seeking competitive intelligence and industry trends.
Teams and executives who want concise, actionable insights without spending hours on manual research.

By automating the entire research-to-report process, this workflow saves hours of tedious work weekly, reduces human error in data collection, and ensures timely, consistent delivery of high-quality insights. It transforms how knowledge workers stay informed, enabling smarter decisions and faster innovation.

Core Prompt for Runner H

1. Search the internet and specific trusted sources for the latest articles, papers, blog posts, and news related to [INSERT TOPIC, e.g., "Artificial Intelligence advancements"] published within the last [time frame, e.g., 7 days].

2. Prioritize reputable sources such as TechCrunch, Wired, arXiv, Medium, GitHub Trending, and relevant RSS feeds.

3. Extract key points, trends, and breakthroughs from each source, summarizing them in 2-3 sentences.

4. Categorize the findings into logical sections (e.g., Research Papers, Industry News, Tools & Projects).

5. Compile these summaries into a single cohesive report with:
   - A clear and engaging title
   - An introduction outlining the report's scope
   - Well-structured sections grouping related content
   - Concise, reader-friendly language suitable for [target audience, e.g., tech professionals]

6. Format the final report as a Markdown or Google Doc file, ready for distribution.

7. Save the report in [Google Drive/Notion/other] and notify the team via Slack/email with the report link.

8. Schedule a recurring calendar event for weekly/monthly report delivery.

Social Love

Thank you to the Runner H team for this exciting challenge! Looking forward to seeing how the community innovates with AI agents.

Interactive Solar System Animation - A CSS Art Journey Through Space 🌌

Abu Taher Siddik — Thu, 19 Dec 2024 16:04:55 +0000

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

The vastness of space has always been a source of wonder and inspiration. This project was born from the desire to create an educational yet visually stunning representation of our solar system using pure CSS art and animations. The goal was to demonstrate how modern web technologies can be used to create both beautiful and scientifically accurate visualizations.

What makes this project special is its attention to detail:

Realistic planet textures using actual space imagery
Proportionally scaled planet sizes
Mathematically calculated orbital periods (scaled for visualization)
Dynamic starfield that creates depth and movement
Real-time UTC clock integration

Demo

Live Demo

[https://imabutahersiddik.github.io/Solar-System-Animation/]

Preview

Code Playground

Journey

The Creative Process

Research Phase
- Studied astronomical data for accurate planet proportions
- Researched CSS animation techniques for smooth orbital movements
- Collected high-quality planet textures
Technical Challenges
- Creating realistic planet orbits using CSS transforms
- Implementing a dynamic starfield that doesn't impact performance
- Balancing between scientific accuracy and visual appeal
Key Learnings
- Advanced CSS animation techniques
- Performance optimization for complex animations
- Mathematical calculations for orbital periods
- Working with background-image positioning for spherical objects

Technical Highlights

/* Example of orbital animation */
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Planet-specific orbits with accurate relative periods */
#mercury-orbit { animation: rotate 8.8s linear infinite; }
#venus-orbit { animation: rotate 22.5s linear infinite; }
#earth-orbit { animation: rotate 36.5s linear infinite; }

Proud Achievements

Performance Optimization
- Smooth 60fps animations
- Minimal DOM manipulation
- Efficient use of CSS transforms
Educational Value
- Accurate representation of planetary motion
- Real-time UTC clock integration
Visual Appeal
- Dynamic twinkling stars
- Realistic planet textures
- Smooth orbital transitions

Future Enhancements

Add planet rotation on their axes
Include major moons and their orbits
Implement asteroid belt visualization
Add interactive information cards
Include sound effects for an immersive experience

Resources

GitHub Repository
Planet textures: flaticon.com
Astronomical data: NASA

License

This project is open source and available under the MIT License.

Technical Stack

HTML5
CSS3 (Animations & Transforms)
JavaScript (ES6+)
No external libraries or frameworks

Repository Structure

solar-system/
├── index.html         # Main HTML file
├── README.md         # Documentation
└── screenshots/      # Project previews

I'm particularly proud of creating this educational visualization that combines artistic creativity with scientific accuracy. The project demonstrates how modern web technologies can be used to create engaging educational content without relying on heavy frameworks or libraries.

Feel free to fork, star, and contribute to the project on GitHub!

PinFu: A Dual-Purpose Application for Effortless File Uploads to Pinata

Abu Taher Siddik — Mon, 07 Oct 2024 20:55:10 +0000

What I Built

PinFu is a dual-purpose application designed for seamless file uploads to Pinata. It consists of two components:

PinFu Web Application: A user-friendly web interface built with PHP that allows users to manage their Pinata API keys, upload files, and view uploaded files on IPFS.
PinFu CLI Application: A command-line interface that enables users to upload files directly from the terminal, manage API keys, and view uploaded files easily.

Demo

You can access the web application at PinFu Demo. Below are some screenshots showcasing the user interface:

PinFu Web Upload

Uploaded Files

My Code

You can find the source code for both the web application and CLI in this GitHub repository: PinFu Repository.

imabutahersiddik / pinfu

Web app for uploading files to Pinata with a user-friendly interface and API key management.

PinFu - Pinata File Upload

PinFu is a web-based application that allows users to upload files to the Pinata platform seamlessly. Built using PHP, PinFu provides a user-friendly interface for managing API keys, uploading files, and viewing uploaded files on IPFS.

Features

Save and manage your Pinata API keys securely through the UI.
Upload various types of files (images, videos, documents) to Pinata.
View the IPFS hash and link for each uploaded file.
User-friendly interface for easy navigation.

Requirements

PHP 7.4 or higher
A web server (e.g., Apache, Nginx)
Access to the internet for API requests

Installation

Clone the repository:

git clone https://github.com/imabutahersiddik/pinfu.git
cd pinfu
php -S localhost:8000

Ensure Composer dependencies are installed:
- Composer is already installed in the repository, so no additional installation is necessary.
Configure your web server:
- Set…

View on GitHub

Web Application: /pinfu
CLI Application: /pinfu/pinata_cli

More Details

How I Used Pinata

API Integration: Both applications utilize Pinata's Files API to handle file uploads efficiently. Users can save their API keys directly through the UI or CLI.
File Uploads: The web app allows users to select files from their local machine and upload them to Pinata, displaying the IPFS hash upon successful upload. The CLI app offers a similar experience but through terminal commands.
Viewing Uploaded Files: Users can view a list of uploaded files along with their IPFS hashes and direct links to access them via Pinata's gateway.

What's New in the October 13, 2024 Update

1. Enhanced File Upload Details

SHA-256 Hash Storage: Each uploaded file now includes a SHA-256 hash for improved verification and integrity checks.
Upload Date Tracking: The date and time of each file upload are now recorded, allowing users to see when files were added.

2. Social Media Sharing Functionality

Share Buttons Added: Users can now easily share uploaded files on popular social media platforms, including:
- Facebook
- Twitter
- LinkedIn
- WhatsApp
Iconify Integration: Social share buttons feature icons from the Iconify library for a modern and visually appealing interface.

3. Added Tabs for Categorization

File Category Tabs: The application now includes dedicated tabs for categorizing uploaded files, such as Images, Videos, Archives, and Software. This allows users to easily navigate and manage their files based on type.

4. Improved Pagination Logic

Category-Specific Pagination: Pagination functionality has been enhanced to work seamlessly with different file categories, allowing users to navigate through their uploaded files easily.
Current Category Detection: The application now intelligently detects the current tab/category, ensuring that pagination works correctly for each section.

What's New in the October 14, 2024 Update

1. Enhanced File Upload with Drag-and-Drop Support

The addition of drag-and-drop functionality greatly improves the file upload process.

2. File Size Displayed in User Interface

Easily view file sizes in the UI for quick access and better file management.

Summary

This update enhances the overall functionality and user experience of the application by adding important features such as file integrity tracking, social sharing options, and improved categorization through dedicated tabs. Users can now manage their uploaded files more effectively while sharing them effortlessly across social media platforms.

Creating an AI Chatbot with CopilotKit: A Step-by-Step Guide Using Flask and React

Abu Taher Siddik — Mon, 30 Sep 2024 15:10:38 +0000

Creating an AI chatbot using CopilotKit integrated with a Flask backend can be an exciting project. Below is a step-by-step guide on how to set up your project, including the necessary components for both the frontend (using React and CopilotKit) and the backend (using Flask).

Project Overview

Components

Flask Backend: Handles API requests and serves the frontend.
React Frontend: Uses CopilotKit to create an interactive AI chatbot interface.
AI Integration: Connects to an AI model (like Google's Gemini) for generating responses.

Step 1: Set Up the Flask Backend

1. Install Flask

First, create a virtual environment and install Flask:

mkdir chatbot-backend
cd chatbot-backend
python -m venv venv
source venv/bin/activate  # On Windows use `venv\Scripts\activate`
pip install Flask flask-cors

2. Create the Flask App

Create a file named app.py:

from flask import Flask, request, jsonify
from flask_cors import CORS
import openai  # Make sure to install OpenAI SDK if you're using it

app = Flask(__name__)
CORS(app)  # Allow CORS for all domains

# Set your OpenAI API key
openai.api_key = 'YOUR_OPENAI_API_KEY'

@app.route('/api/chat', methods=['POST'])
def chat():
    user_message = request.json.get('message')

    # Call the AI model (e.g., OpenAI GPT)
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": user_message}]
    )

    bot_message = response.choices[0].message['content']
    return jsonify({'response': bot_message})

if __name__ == '__main__':
    app.run(debug=True)

3. Run the Flask App

Run your Flask app:

python app.py

Your backend should now be running on http://127.0.0.1:5000.

Step 2: Set Up the React Frontend with CopilotKit

1. Create a React App

In a new directory, create your React app:

npx create-react-app chatbot-frontend
cd chatbot-frontend

2. Install CopilotKit

Install CopilotKit and Axios for making API calls:

npm install @copilotkit/react axios

3. Create the Chatbot Component

Create a file named Chatbot.js in the src directory:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { CopilotSidebar, useCopilotChat } from '@copilotkit/react';
import './Chatbot.css'; // Importing CSS file for styling

const Chatbot = () => {
    const [message, setMessage] = useState('');
    const [chatHistory, setChatHistory] = useState([]);
    const [selectedPrompt, setSelectedPrompt] = useState('');
    const [conversations, setConversations] = useState([]);
    const [prompts, setPrompts] = useState([]);
    const [newPrompt, setNewPrompt] = useState('');
    const [searchTerm, setSearchTerm] = useState('');
    const [showPromptInput, setShowPromptInput] = useState(false); // State to toggle prompt input visibility
    const { addMessage } = useCopilotChat();

    useEffect(() => {
        // Load conversations and prompts from local storage on component mount
        const storedChats = JSON.parse(localStorage.getItem('chatHistory')) || [];
        const storedPrompts = JSON.parse(localStorage.getItem('prompts')) || [];
        setConversations(storedChats);
        setPrompts(storedPrompts);

        // Load the most recent conversation into chat history if available
        if (storedChats.length > 0) {
            setChatHistory(storedChats[storedChats.length - 1].history);
        }
    }, []);

    const handleSendMessage = async () => {
        const userMessage = { sender: 'User', text: message };
        const updatedChatHistory = [...chatHistory, userMessage];
        setChatHistory(updatedChatHistory);
        setMessage('');

        try {
            const response = await axios.post('http://127.0.0.1:5000/api/chat', { message });
            const botMessage = { sender: 'Bot', text: response.data.response };
            updatedChatHistory.push(botMessage);
            setChatHistory(updatedChatHistory);

            // Add messages to Copilot
            addMessage(userMessage);
            addMessage(botMessage);

            // Save updated chat history to local storage
            localStorage.setItem('chatHistory', JSON.stringify(updatedChatHistory));
        } catch (error) {
            console.error('Error sending message:', error);
        }
    };

    const handlePromptSelect = (prompt) => {
        setSelectedPrompt(prompt);
        setMessage(prompt);
    };

    const handleConversationClick = (conversation) => {
        setChatHistory(conversation.history);
    };

    const handleSaveConversation = () => {
        const title = prompt("Enter a title for this conversation:");
        if (title) {
            const newConversation = { title, history: chatHistory };
            const updatedConversations = [...conversations, newConversation];
            setConversations(updatedConversations);
            localStorage.setItem('chatHistory', JSON.stringify(updatedConversations));
        }
    };

    const handleAddPrompt = () => {
        if (newPrompt.trim()) {
            const updatedPrompts = [...prompts, newPrompt.trim()];
            setPrompts(updatedPrompts);
            localStorage.setItem('prompts', JSON.stringify(updatedPrompts));
            setNewPrompt('');
            setShowPromptInput(false); // Hide the input after adding
        }
    };

    // Function to delete a conversation
    const handleDeleteConversation = (index) => {
        const updatedConversations = conversations.filter((_, i) => i !== index);
        setConversations(updatedConversations);
        localStorage.setItem('chatHistory', JSON.stringify(updatedConversations));

        // Optionally reset chat history if the deleted conversation was currently loaded
        if (chatHistory === conversations[index].history) {
            setChatHistory([]);
        }
    };

    // Filtered prompts based on search term
    const filteredPrompts = prompts.filter(prompt => 
        prompt.toLowerCase().includes(searchTerm.toLowerCase())
    );

    // Filtered conversations based on search term
    const filteredConversations = conversations.filter(conversation =>
        conversation.title.toLowerCase().includes(searchTerm.toLowerCase())
    );

    return (
        <div className="chatbot-container">
            <CopilotSidebar title="Recent Conversations">
                <input 
                    type="text" 
                    placeholder="Search Conversations..." 
                    value={searchTerm} 
                    onChange={(e) => setSearchTerm(e.target.value)} 
                    className="search-input"
                />
                {filteredConversations.map((conversation, index) => (
                    <div key={index} className="conversation-title">
                        <span onClick={() => handleConversationClick(conversation)}>
                            {conversation.title}
                        </span>
                        <button className="delete-button" onClick={() => handleDeleteConversation(index)}>
                            🗑️ {/* Delete icon */}
                        </button>
                    </div>
                ))}
                <button onClick={handleSaveConversation} className="save-button">Save Conversation</button>
            </CopilotSidebar>
            <div className="chat-area">
                <h2>AI Chatbot</h2>
                <div className="chat-history">
                    {chatHistory.map((chat, index) => (
                        <div key={index} className={`message ${chat.sender === 'User' ? 'user' : 'bot'}`}>
                            <strong>{chat.sender}:</strong> {chat.text}
                        </div>
                    ))}
                </div>
                <div className="input-area">
                    <select 
                        value={selectedPrompt} 
                        onChange={(e) => handlePromptSelect(e.target.value)} 
                        className="prompt-select"
                    >
                        <option value="">Select a prompt...</option>
                        {filteredPrompts.map((prompt, index) => (
                            <option key={index} value={prompt}>{prompt}</option>
                        ))}
                    </select>

                    {/* Button to toggle visibility of the new prompt input */}
                    <button onClick={() => setShowPromptInput(!showPromptInput)} className="toggle-prompt-button">
                        {showPromptInput ? "Hide Prompt Input" : "Add New Prompt"}
                    </button>

                    {/* New Prompt Input Field */}
                    {showPromptInput && (
                        <input 
                            type="text" 
                            value={newPrompt} 
                            onChange={(e) => setNewPrompt(e.target.value)} 
                            placeholder="Add a new prompt..." 
                            className="new-prompt-input"
                        />
                    )}

                    {/* Button to add the new prompt */}
                    {showPromptInput && (
                        <button onClick={handleAddPrompt} className="add-prompt-button">Add Prompt</button>
                    )}

                    {/* Message Input Field */}
                    <input 
                        type="text" 
                        value={message} 
                        onChange={(e) => setMessage(e.target.value)} 
                        placeholder="Type your message..." 
                        className="message-input"
                    />
                    <button onClick={handleSendMessage} className="send-button">Send</button>
                </div>
            </div>
        </div>
    );
};

export default Chatbot;

4. Update App.js

Replace the contents of src/App.js with:

import React from 'react';
import Chatbot from './Chatbot';

function App() {
    return (
        <div className="App">
            <Chatbot />
        </div>
    );
}

export default App;

5. Create Chatbot.css

.chatbot-container {
    display: flex;
    height: 100vh;
}

.chat-area {
    margin-left: 20px;
    flex-grow: 1;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chat-history {
    border: 1px solid #ccc;
    padding: 10px;
    height: calc(100% - 120px); /* Adjust height based on input area */
    overflow-y: scroll;
    border-radius: 8px;
}

.message {
    margin-bottom: 10px;
}

.user {
    text-align: right;
}

.bot {
    text-align: left;
}

.input-area {
    display: flex;
    align-items: center;
}

.prompt-select {
    margin-right: 10px;
}

.message-input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.send-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.send-button:hover {
    background-color: #0056b3;
}

.conversation-title {
    padding: 10px;
    cursor: pointer;
}

.conversation-title:hover {
    background-color: #f0f0f0;
}

.save-button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button:hover {
    background-color: #218838;
}

.prompt-select,
.new-prompt-input,
.message-input {
    margin-right: 10px;
}

.search-input {
    margin-bottom: 10px;
}

.new-prompt-input {
   flex-grow: 1; /* Allow it to take remaining space */
   padding: 10px;
   border-radius: 4px;
   border: 1px solid #ccc;
}

.add-prompt-button,
.send-button,
.save-button {
   padding: 10px 15px;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.add-prompt-button:hover,
.send-button:hover,
.save-button:hover {
   background-color: #0056b3; /* Darker shade for hover */
}

.conversation-title {
   padding: 10px;
   cursor: pointer;
}

.conversation-title:hover {
   background-color: #f0f0f0; /* Highlight on hover */
}

.toggle-prompt-button {
   margin-right: 10px;
   padding: 10px 15px;
   background-color: #17a2b8; /* Different color for visibility */
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}

.toggle-prompt-button:hover {
   background-color: #138496; /* Darker shade for hover */
}

5. Run the React App

Start your React app:

npm start

Your frontend should now be running on http://localhost:3000.

Step 3: Testing Your Chatbot

Ensure both your Flask backend and React frontend are running.
Open your browser and navigate to http://localhost:3000.
Type messages into the input field and see responses from the AI chatbot.

To include a GitHub repository URL in your dev.to post about building a chatbot with CopilotKit, Flask, and React, you can format it as follows:

Building an AI Chatbot with CopilotKit, Flask, and React

In this post, we'll walk through the steps to create an interactive AI chatbot using CopilotKit for the frontend, Flask as the backend, and React for the user interface.

GitHub Repository

You can find the complete code for this project on GitHub: Chatbot with CopilotKit

Conclusion

You now have a basic AI chatbot built using CopilotKit for the frontend and Flask for the backend! You can enhance this project by adding features like user authentication, saving chat history, or improving UI/UX design.

The Future of Web Hosting: A Guide to Storage-less Web Page Hosting

Abu Taher Siddik — Mon, 16 Sep 2024 09:36:17 +0000

The Future of Web Hosting: A Guide to Storage-less Web Page Hosting

In the ever-evolving landscape of the internet, a new paradigm has emerged that promises to revolutionize how we think about data storage and accessibility. Enter Storage-less Web Page Hosting, a groundbreaking approach that ensures your information remains secure, immutable, and perpetually available. In this post, we will explore what this technology is, how it works, its importance, and how you can get started with your own storage-less web pages.

What is Storage-less Web Page Hosting?

Storage-less web page hosting represents a significant evolution in web technology. Unlike traditional web hosting services that rely on servers and databases to store data, this innovative approach embeds data directly into the URL. This means that your content is not only secure but also immune to deletion or modification.

Key Features:

Indefinite Data Storage: Your information lives in the website address forever.
Immutability: Once data is stored, it cannot be altered or erased.
Enhanced Security: Data is protected using AES-256 encryption, making it nearly impossible for unauthorized users to access or modify your content.

Complete Guide to Erath: Features, Functionality, and September Update

Erath is an innovative web application designed to simplify the process of hosting HTML code. Whether you are a beginner looking to experiment with web development or an experienced developer wanting to share your projects, Erath offers a straightforward solution. This guide will walk you through its features, provide step-by-step instructions with examples, and highlight what's new in the September update.

Introduction to Erath

Erath allows users to paste their HTML code into a user-friendly interface and instantly host it online. The application generates a unique link for easy access and sharing. This guide is structured to cater to all experience levels, ensuring that everyone can benefit from Erath's functionalities.

Key Features of Erath

1. User-Friendly Interface

Overview: The interface is designed for ease of use, enabling users of all skill levels to navigate effortlessly.