🎨 How We Generated the MyZubster Logo with DeepSeek AI and Open Source Tools

🎨 How We Generated the MyZubster Logo with DeepSeek AI and Open Source Tools

A practical case study: creating a visual identity for an open-source project using AI and command-line tools.
📌 Introduction

MyZubster is a decentralized marketplace that combines Monero, Tari, Kali Linux, NFTs, and AI. But every project needs a visual identity. Instead of using closed-source services or hiring a designer, we used:

DeepSeek AI (local, on Ollama) to generate SVG code.

ImageMagick to convert SVG to PNG.

Nginx to serve the logo statically.

React to integrate it into the frontend.

The result: a custom, open-source, and completely free logo.
🧠 Logo Generation with DeepSeek AI

DeepSeek is the AI model we already integrated into MyZubster for security and dispute resolution. We used the same model to generate the logo:
bash

TOKEN=$(curl -s -X POST http://localhost:3000/api/auth/login \
-H "Content-Type: application/json" \
-d '{"email":"[e-mail]","password":"Test123!"}' | jq -r '.token')

curl -X POST http://localhost:3000/api/ai/ask \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: application/json" \
-d '{"prompt":"Generate an SVG logo for MyZubster, a decentralized marketplace. Use electric blue and mint green colors on a dark background. Abstract symbol representing blockchain and privacy. Only valid SVG code."}' | jq -r '.response' > /root/logo.svg

The result was a valid SVG file, which we later refined.
🖼️ Conversion and Optimization

We used ImageMagick to convert the logo to PNG and optimize it for the web:
bash

apt install imagemagick -y
convert /root/logo.svg /root/logo.png

Then we uploaded the final version (a custom JPG) to the server:
bash

scp C:\Users\user\Desktop\myzubsterlogo.jpg root@188.213.161.186:/root/
cp /root/myzubsterlogo.jpg /var/www/myzubster-frontend/logo_custom.jpg
chmod 644 /var/www/myzubster-frontend/logo_custom.jpg
chown www-data:www-data /var/www/myzubster-frontend/logo_custom.jpg

🔧 Integration into the Frontend

1. Favicon (Browser Tab)

We updated index.html to use the new logo as favicon:
bash

sed -i 's|||' /var/www/myzubster-frontend/index.html

1. Logo in the Navbar (React)

We modified Layout.jsx to include the logo:
jsx

src="/logo_custom.jpg"
alt="MyZubster Logo"
className="h-10 w-auto rounded-full border-2 border-blue-400"
/>

Then we rebuilt the frontend:
bash

cd ~/myzubster-frontend
npm run build
cp -r dist/* /var/www/myzubster-frontend/
systemctl reload nginx

✅ Final Result

Logo visible in the browser tab (favicon).

Logo visible in the site's navigation bar.

Fully open source, generated with AI and free tools.

Total time: less than 30 minutes.

🧠 What We Learned

DeepSeek AI can generate valid and customizable SVG code.

ImageMagick is a powerful command-line tool for converting and optimizing images.

Nginx serves static files efficiently.

React makes it easy to integrate graphical assets.

🔗 Useful Links

Live demo: https://myzubster.com

GitHub: DanielIoni-creator/MyZubsterGateway

DeepSeek AI: Ollama + DeepSeek

🏷️ Tags

AI #OpenSource #DeepSeek #LogoDesign #React #Nginx #MyZubster #Blockchain #Privacy #BuildInPublic

Built with ❤️ by Daniel Ioni and the MyZubster community.