DEV Community

Cover image for Simple Image Captioner
Madhumitha
Madhumitha

Posted on

Simple Image Captioner

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission ๐Ÿ’ธ

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

I built an image captioner using Streamlit that helps the side hustlers to generate the captions or descriptions of the uploaded image that are to be posted in their online shopping sites. This will be useful for them, as privacy will be a concern for their image.

Demo

Code

import os
import base64
import streamlit as st
from dotenv import load_dotenv
from groq import Groq
import streamlit.components.v1 as components


load_dotenv()
api_key = os.getenv("GROQ_API")
VISION_MODEL = "qwen/qwen3.8-27b"

st.set_page_config(page_title="Image Captioner", page_icon="๐Ÿ–ผ๏ธ", layout="centered")

st.title("๐Ÿ–ผ๏ธ Image Captioner")
st.subheader("Upload an image and get a detailed description")

uploaded_file = st.file_uploader(
    "Upload your image",
    type=["jpg", "jpeg", "png", "webp"]
)

if uploaded_file is not None:
    # Display the uploaded image
    st.image(uploaded_file, caption="Uploaded Image", use_container_width=True)

    # Button to generate description
    if st.button("Generate Description", type="primary"):
        if not api_key:
            st.error("โŒ GROQ_API key not found.")
        else:
            with st.spinner("Generating description..."):
                try:
                    # Convert image to base64
                    image_bytes = uploaded_file.getvalue()
                    base64_image = base64.b64encode(image_bytes).decode("utf-8")

                    # Determine mime type
                    mime_type = uploaded_file.type or "image/jpeg"

                    # Initialize Groq client
                    client = Groq(api_key=api_key)

                    # Call the vision model
                    response = client.chat.completions.create(
                        model=VISION_MODEL,
                        messages= [{
                                "role": "user",
                                "content": [{
                                        "type": "text",
                                        "text": (
    "Describe this image in one single, clear, natural, and polished paragraph. "
    "Write it as a ready-to-use caption suitable for posting on social media. "
    "Do not give multiple options, do not add titles, and do not explain anything. "
    "Just output one clean description."
),
                                    },
                                    {
                                        "type": "image_url",
                                        "image_url": {
                                            "url": f"data:{mime_type};base64,{base64_image}"
                                        },
                                    },
                                ],
                            }
                        ],
                        temperature=0.3,
                        max_completion_tokens=1024,
                    )

                    description = response.choices[0].message.content

                    st.success("โœ… Description generated!")
                    st.markdown("### Description")

                    # Display the text with wrapping
                    st.markdown(
                        f"""
                        <div style="
                            padding: 15px;
                            border-radius: 8px;
                            white-space: pre-wrap;
                            word-wrap: break-word;
                            line-height: 1.6;
                            font-size: 15px;
                        ">
                        {description}
                        </div>
                        """,
                        unsafe_allow_html=True
                    )

                    # Working Copy button

                    components.html(
                        f"""
                        <button onclick="
                            navigator.clipboard.writeText(`{description.replace('`', '\\`').replace('"', '&quot;')}`);
                            this.innerText = 'Copied!';
                            setTimeout(() => this.innerText = 'Copy to clipboard', 2000);
                        "
                        style="
                            margin-top: 12px;
                            background-color: #4CAF50;
                            color: white;
                            border: none;
                            padding: 10px 18px 10px 18px;
                            border-radius: 6px;
                            cursor: pointer;
                            font-size: 14px;
                        ">
                            Copy to clipboard
                        </button>
                        """,
                        height=55
                    )

                except Exception as e:
                    st.error(f"Error generating description: {str(e)}")
else:
    st.info("๐Ÿ‘† Please upload an image to get started.")
Enter fullscreen mode Exit fullscreen mode

How I Built It

  • Streamlit -> user interface for the application
  • qwen3.8-27b -> model that is used for generating image descriptions.

Why Does Open Innovation Matter?

1. Useful Knowledge is Widely Distributed
No single company, no matter how large, has a monopoly on the best ideas or talent.
Smart people and valuable knowledge exist outside the organization โ€” in universities, startups, customers, suppliers, and even competitors.
Open Innovation allows companies to access this external knowledge instead of trying to invent everything themselves.

2. It Speeds Up Innovation
By bringing in external ideas, technologies, and partners, companies can develop new products and solutions much faster than relying solely on internal R&D.

3. It Reduces Cost and Risk
Sharing development work lowers R&D expenses.
Collaborating with partners spreads the risk of failure.
Companies can license or acquire proven technologies instead of starting from scratch.

4. It Creates New Revenue Streams
Companies can monetize unused internal ideas by licensing them out or spinning them off (the โ€œoutboundโ€ side of Open Innovation).
Ideas that donโ€™t fit the current business model can still generate value.

5. It Improves Business Performance
Research consistently shows that companies practicing Open Innovation tend to:
Launch more successful products
Achieve higher sales and better financial returns
Respond faster to market changes

6. It Builds Competitive Advantage in a Complex World
In industries facing rapid technological change, sustainability challenges, and global competition, the ability to collaborate externally has become a critical capability for survival and growth.

Top comments (0)