Bridging Code and Communication: Introducing Code2Story Pro

In today’s digital age, programming has become a crucial skill, and sharing code has also gained significant importance. After completing a coding project, many developers wish to write engaging blog posts to showcase their achievements. However, writing blogs is time-consuming and labor-intensive, which discourages many developers. Today, I’d like to introduce you to an AI tool I’ve developed—Code2Story Pro, which can instantly transform Python code into emotionally engaging and well-structured blog posts, making code sharing easier and more efficient.

The Gap Between Coding and Writing

For developers, code is like a second language that can precisely express logic and functionality. But code is cold and mechanical, and it’s difficult to convey the true value and meaning of a project to a non-technical audience. Whether you want to report project progress to team members, demonstrate results to clients, provide learning cases for students, or present your technical skills to recruiters, code alone is often insufficient. People need a narrative that gives code meaning and helps them understand the project’s background, objectives, and implementation process.

However, writing such stories is no easy task. It requires developers to have good writing skills and to spend a lot of time organizing their thoughts and expressing themselves. Many developers face significant challenges in this area. They often lack the time or writing skills to effectively share their code achievements. This is what motivated me to develop Code2Story Pro—a tool designed to bridge the gap between coding and writing.

What Makes Code2Story Pro Unique

Many code documentation tools on the market focus on the “how,” providing line-by-line comments, API references, and docstrings that detail the technical aspects of code. Code2Story Pro, however, stands out by focusing on the “why.” It helps developers tell stories to real audiences.

This tool can cater to the needs of different audiences. Whether you’re looking to provide a quick summary for team members, a high-level view for stakeholders, a learning resource for students, a portfolio showcase for recruiters, or a refresher for your future self, Code2Story Pro can generate appealing stories in under a minute, complete with your preferred tone, emotional style, and structure.

How It Works

Code2Story Pro is a web application built on the Streamlit framework, with its core functionality powered by the GPT-4 model to convert code into blog posts. Here’s how it works:

First, users paste their Python code into a text area.
Then, users select their preferred tone (e.g., casual, formal, humorous, inspirational, technical), emotion (e.g., curious, confident, frustrated, playful, empowering), and article structure (e.g., tutorial, story-first, problem-solution, listicle, case study).
When the user clicks the “Generate Blog Post” button, GPT-4 converts the code into a complete blog post, including a title, summary, main content, and three social media posts tailored for LinkedIn, Twitter, and Reddit.

Below is a detailed breakdown of the code implementation:

Importing Necessary Libraries

import streamlit as st
from openai import OpenAI
import base64
import os

These libraries are imported to build the web UI with Streamlit, communicate with GPT-4 using the OpenAI library, and handle API key management and encoding with base64 and os.

Initializing the GPT-4 Client

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

This sets up a secure GPT-4 client using the environment variable OPENAI_API_KEY.

Setting Up the Streamlit UI

st.set_page_config(page_title="Code2Story Pro", layout="wide")
st.title("Code2Story Pro — Turn Code into Emotionally Engaging Blogs")

These lines configure the Streamlit app’s title and layout, enhancing its visibility and appeal to search engines.

Creating the Code Input Area

code_input = st.text_area("Paste your code here", height=300)

A large text box is created for users to paste the code they want to transform.

Creating Multi-Option Controls

col1, col2, col3 = st.columns(3)

Three equally sized columns are created for layout purposes.

with col1:
    tone = st.multiselect("Select Tone(s)", ["Formal", "Casual", "Humorous", "Inspirational", "Technical"], default=["Casual"])

This allows users to select one or more writing tones, such as formal, casual, humorous, inspirational, or technical, with casual as the default.

with col2:
    emotion = st.multiselect("Select Emotion(s)", ["Curious", "Confident", "Frustrated", "Playful", "Empowering"], default=["Confident"])

This defines the emotional tone of the blog post, such as curious, confident, frustrated, playful, or empowering, with confident as the default.

with col3:
    structure = st.multiselect("Select Structure(s)", ["Tutorial", "Story-first", "Problem-Solution", "Listicle", "Case Study"], default=["Story-first"])

Users can choose the article structure, including tutorial, story-first, problem-solution, listicle, or case study, with story-first as the default.

Core Blog Generation Logic

def generate_blog_post(code: str, tone: list, emotion: list, structure: list):

This is the main function responsible for blog creation.

if not tone: tone = ["Casual"]
if not emotion: emotion = ["Confident"]
if not structure: structure = ["Story-first"]

Default values are provided if no options are selected.

tone_str = ", ".join(tone)
emotion_str = ", ".join(emotion)
structure_str = ", ".join(structure)

Multi-select values are combined into comma-separated strings to be passed into the GPT prompt.

prompt = f"""
You are a professional blog writer AI assistant.
Convert the following code into a blog post. Use the tone(s): '{tone_str}', convey the emotion(s): '{emotion_str}', and follow the structure(s): '{structure_str}'.
Also generate a title, summary, and 3 social media post variations (LinkedIn, Twitter, Reddit).

CODE:
{code}
"""

This is the custom prompt sent to GPT-4, the core of the blog generation process.

response = client.chat.completions.create(
    model="gpt-4",
    messages=[{"role": "user", "content": prompt}],
    temperature=0.7
)

The prompt is sent to OpenAI to retrieve a chat completion.

content = response.choices[0].message.content
parts = content.split("\n---\n")

The response is split into different sections: title, summary, main content, and social media posts.

title = parts[0].strip() if len(parts) > 0 else "Untitled Blog Post"
summary = parts[1].strip() if len(parts) > 1 else "No summary provided."
blog = parts[2].strip() if len(parts) > 2 else "No blog content generated."
social = parts[3].strip() if len(parts) > 3 else ""

The blog components are safely extracted to avoid errors if any section is missing.

Blog Display Function

def assemble_blog_output(title, summary, blog, social):
    output = f"""
### {title}


{blog}

---

**Social Media Posts:**

{social}
"""
    return output

This function combines the components into a readable format for rendering in Streamlit.

if st.button("Generate Blog Post"):
    with st.spinner("Generating blog post..."):
        blog_content, title, summary, social_posts = generate_blog_post(code_input, tone, emotion, structure)
        blog_output = assemble_blog_output(title, summary, blog_content, social_posts)

        st.markdown(blog_output, unsafe_allow_html=True)

This is the main trigger. When the user clicks the button:

The input is sent to GPT-4.
Blog content is generated.
The content is elegantly displayed below the UI.

Code2Story Pro: A Bridge for Technical Communication

Code2Story Pro holds significant importance for technical communication. While writing clear code is crucial, conveying its meaning to team members, clients, and audiences is equally vital. Often, people are unwilling to spend time studying code to understand its functionality and value. Code2Story Pro offers a solution by expressing technical content in plain language, enabling readers to quickly grasp the logic and significance behind the code.

Whether you want to showcase project outcomes, share programming experiences, or demonstrate technical skills for job applications, Code2Story Pro provides robust support. It transforms code from cold characters into生动的故事, allowing readers to better appreciate the charm and value of programming.

From Python Code to Captivating Narratives: How Code2Story Pro Automates Technical Storytelling