The SVG Button Generator is a lightweight tool designed to generate custom tags as SVG files that can be used as custom emojis in the open-source forum software Discourse. It provides a way to "tag" content visually without needing to use additional plugins.
SVG-Tag Generator
how to set them up in Discourse settings as custom emoji
A grid of tags in Discourse - embeded via custom emojis:
The SVG Button Generator offers the following features:
- Input field to change the text displayed on the button.
- Color picker to customize the button's color.
- Preset color options for quick color selection.
- Position slider to manually adjust the text's positioning on the button.
- Automatic SVG button generation after the position slider is released.
- Download button to save the generated SVG file. The filename format is "status_{button_text}.svg", all in lowercase.
- File generation and design adjustments are made without requiring a page reload.
The SVG Button Generator is built using HTML, CSS, and Vue.js, a progressive JavaScript framework. Bootstrap, a popular CSS framework, is used for its responsive grid system and prebuilt components, ensuring a mobile-friendly interface.
This project highlights a novel approach to software development through a unique collaboration between a human supervisor and OpenAI's language model, ChatGPT-4. This process fundamentally differs from traditional methods, as it blends the ingenuity of human thought with the efficiency and computational prowess of AI.
The journey began with a clear high-level concept from the human supervisor. This concept was then communicated to ChatGPT-4, which acted as an AI developer, breaking down the concept into smaller, manageable tasks, and writing the necessary code for each feature in HTML, CSS, Vue.js and this readme.md.
Throughout the development process, the supervisor provided continual guidance and feedback to the AI. This feedback not only steered the overall direction of the project, but also helped refine and debug the application on an iterative basis. This collaborative approach allowed for rapid prototyping, quick adjustments, and efficient problem-solving, leading to the successful completion of the project.
On the other hand, ChatGPT-4 leveraged its vast training data to propose innovative solutions, and efficiently translated the supervisor's requirements into functional code. It also played a significant role in debugging and refining the application.
What makes this development process unique is the iterative and dynamic nature of the human-AI interaction. The real-time, bidirectional feedback loop between the supervisor and the AI enabled the team to swiftly adapt to changes, overcome challenges, and steer the project towards the desired outcome.
This project serves as an example of the power of AI-assisted development. It illustrates that AI, like ChatGPT-4, can serve as an invaluable tool in the hands of developers, augmenting human creativity with computational efficiency. This approach holds great potential for future software development, offering a glimpse into the exciting possibilities of human-AI collaboration.
You may take a look at the prompt history.
Simply enter your desired text, select a color, and adjust the position as needed. Click the 'Generate' button to view your custom SVG button, and use the 'Download SVG' button to download your creation for use in Discourse as a custom emoji.
This tool provides an intuitive and straightforward way to create visually appealing custom emojis for Discourse, enhancing user experience and allowing for effective content tagging.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent