WEBVTT

00:00:10.830 --> 00:00:12.869
Hey everyone, welcome back to the Data and AI

00:00:12.869 --> 00:00:16.190
with Mukundan podcast. Today's episode, I want

00:00:16.190 --> 00:00:20.969
to talk about how we can use AI to turn Python

00:00:20.969 --> 00:00:25.350
code into an emotionally engaging blog post.

00:00:26.350 --> 00:00:30.629
Right. So welcome back and if you're a developer,

00:00:30.870 --> 00:00:34.090
content creator or someone who just wants to

00:00:34.090 --> 00:00:36.950
communicate technical work without sounding like

00:00:36.950 --> 00:00:40.200
a robot, this one's for you. Today, I want to

00:00:40.200 --> 00:00:42.780
take you behind the scenes of a project that

00:00:42.780 --> 00:00:45.740
I built recently. It's called Code to Story Pro.

00:00:46.579 --> 00:00:50.700
It's a tool that turns Python code into emotionally

00:00:50.700 --> 00:00:57.840
resonant blog posts using GPT -4. So this episode

00:00:57.840 --> 00:01:01.719
isn't just about automation. It's also about

00:01:01.719 --> 00:01:06.019
storytelling, right? So you write something really

00:01:06.019 --> 00:01:10.519
amazing, super amazing code. But you need to

00:01:10.519 --> 00:01:13.040
be able to tell a story from it. And that's the

00:01:13.040 --> 00:01:17.459
goal here. Because your code can be only good

00:01:17.459 --> 00:01:21.420
as what it's trying to tell. You should be able

00:01:21.420 --> 00:01:25.680
to explain what you've written. Especially this

00:01:25.680 --> 00:01:30.459
is for people who are busy. It's basically about

00:01:30.459 --> 00:01:35.120
connecting through code without needing to manually

00:01:35.120 --> 00:01:40.689
explain every single line. In this episode, I'll

00:01:40.689 --> 00:01:42.750
walk you through the problem that we're trying

00:01:42.750 --> 00:01:47.010
to solve and why traditional methods of documentation

00:01:47.010 --> 00:01:53.349
just doesn't cut it anymore. And we'll see how

00:01:53.349 --> 00:01:56.409
this tool works, the story behind building it,

00:01:56.489 --> 00:02:02.090
and where I think this is all headed next. Right?

00:02:02.609 --> 00:02:08.319
So, why do we need CodeToStory Pro? Let's start

00:02:08.319 --> 00:02:11.580
with the problem. Think about the last time that

00:02:11.580 --> 00:02:14.800
you wrote some code. Maybe it was for a class

00:02:14.800 --> 00:02:19.319
project. Maybe for work. Maybe even a hackathon.

00:02:20.659 --> 00:02:24.680
So, you wrote it, you shipped it, you committed

00:02:24.680 --> 00:02:29.259
it. And maybe if you were lucky, you wrote a

00:02:29.259 --> 00:02:36.180
one -line comment or a readme. Now, fast forward

00:02:36.180 --> 00:02:40.710
three months. teammate at work or maybe your

00:02:40.710 --> 00:02:45.509
you know classmate at school or even a recruiter

00:02:45.509 --> 00:02:49.389
or or your future self is looking at the same

00:02:49.389 --> 00:02:57.409
code and they're stuck because code while powerful

00:02:57.409 --> 00:03:04.750
it doesn't explain why because well people are

00:03:04.750 --> 00:03:08.870
busy we don't always have the time to write compelling

00:03:08.870 --> 00:03:13.250
documentation let alone full -fledged blog posts

00:03:13.250 --> 00:03:19.250
but we know how valuable those posts are they

00:03:19.250 --> 00:03:25.590
help us reflect they help others learn they can

00:03:25.590 --> 00:03:30.129
be your best work portfolio right and that's

00:03:30.129 --> 00:03:34.490
where code to story pro comes in so what it does

00:03:35.159 --> 00:03:38.599
so what does what does code to story pro really

00:03:38.599 --> 00:03:43.639
do in short you just you paste your code then

00:03:43.639 --> 00:03:48.639
you pick a tone like formal or casual you pick

00:03:48.639 --> 00:03:52.099
an emotion maybe you want it to sound empowering

00:03:52.099 --> 00:03:57.860
or even frustrated like you were when you were

00:03:57.860 --> 00:04:02.159
banging your head on the keyboard then you pick

00:04:02.159 --> 00:04:07.229
a structure tutorial story first or a problem

00:04:07.229 --> 00:04:12.669
solution structure so then you just click the

00:04:12.669 --> 00:04:16.649
button that generates a blog post and GPT -4

00:04:16.649 --> 00:04:22.350
which is working in the backend turns that code

00:04:22.350 --> 00:04:28.129
into a title a summary a full blog post and three

00:04:28.129 --> 00:04:32.550
social media snippets that you can use for LinkedIn

00:04:33.160 --> 00:04:36.819
twitter and reddit and all within 30 seconds

00:04:36.819 --> 00:04:43.000
see here's the real pain point let's dig deeper

00:04:43.000 --> 00:04:48.240
into why this matters so writing clear code is

00:04:48.240 --> 00:04:54.100
important but communicating what that code means

00:04:54.100 --> 00:05:02.220
is just as important if not more And it's not

00:05:02.220 --> 00:05:07.680
just a nice to have. It's actually like a super

00:05:07.680 --> 00:05:12.500
game changer for your job applications, for the

00:05:12.500 --> 00:05:16.019
team knowledge sharing and for your own individual

00:05:16.019 --> 00:05:22.300
learning. And there's also the emotional friction

00:05:22.300 --> 00:05:27.680
to this, right? If you're a student who, you

00:05:27.680 --> 00:05:30.209
know, you might want to... Make your project

00:05:30.209 --> 00:05:34.149
sound inspiring. You want to inspire your teammates,

00:05:34.350 --> 00:05:37.870
your friends, maybe even your college professor,

00:05:38.069 --> 00:05:42.389
right? And if you're sending it to a manager,

00:05:42.529 --> 00:05:48.350
you want to sound formal. If it's your friend,

00:05:48.509 --> 00:05:51.750
maybe you want it to sound a little playful,

00:05:51.910 --> 00:05:56.490
right? And that flexibility is built into Code

00:05:56.490 --> 00:06:01.569
to Story Pro. and that makes it more than just

00:06:01.569 --> 00:06:06.089
like your random summarizer right it's it's not

00:06:06.089 --> 00:06:11.490
just a summary it's it's a storyteller and you

00:06:11.490 --> 00:06:16.189
want your code to tell a story so let's look

00:06:16.189 --> 00:06:20.649
at how it works let's talk about this how it

00:06:20.649 --> 00:06:25.529
works technically right here's how the ui here's

00:06:25.529 --> 00:06:28.329
how the tool is built The UI is basically made

00:06:28.329 --> 00:06:31.870
with Streamlit and that's a Python based library

00:06:31.870 --> 00:06:35.829
for front -end and I use it for all of my projects

00:06:35.829 --> 00:06:39.329
really it's very easy to do if you're not familiar

00:06:39.329 --> 00:06:43.230
with my work with my podcast as well something

00:06:43.230 --> 00:06:46.569
I keep talking about but if you're new here that's

00:06:46.569 --> 00:06:53.449
something I use to build very quick front -end

00:06:53.449 --> 00:06:57.819
code um so the ui is made with streamlit it's

00:06:57.819 --> 00:07:03.259
very clean fast and web accessible so what i

00:07:03.259 --> 00:07:07.319
used here was multi -select boxes to choose the

00:07:07.319 --> 00:07:12.220
tone emotion and structure and when you click

00:07:12.220 --> 00:07:17.339
generate it sends a custom prompt to gpt4 through

00:07:17.339 --> 00:07:22.779
the openai api so the code is included in that

00:07:22.779 --> 00:07:26.879
prompt along with your tone and structure settings

00:07:26.879 --> 00:07:32.839
so gpd4 then responds with the entire formatted

00:07:32.839 --> 00:07:37.519
blog post then it breaks the response in two

00:07:37.519 --> 00:07:41.939
parts like title summary blog and social posts

00:07:41.939 --> 00:07:47.279
those get rendered in the app so i just mentioned

00:07:47.279 --> 00:07:50.500
this earlier as well you click on the generate

00:07:50.500 --> 00:07:52.779
blog and it will give you the title summary blog

00:07:52.779 --> 00:07:56.620
and the social posts for LinkedIn, Reddit, and

00:07:56.620 --> 00:08:01.560
so on. And all of this just gets rendered in

00:08:01.560 --> 00:08:04.120
the app itself, the website app in Streamlit.

00:08:05.480 --> 00:08:12.019
We also make sure that if the AI skips any section,

00:08:12.240 --> 00:08:17.860
the app doesn't break. And that kind of fail

00:08:17.860 --> 00:08:20.100
-safe matters when you're trying to build it

00:08:20.100 --> 00:08:26.079
for production. Honestly, I just built this out

00:08:26.079 --> 00:08:30.639
of frustration. I kept finding myself wanting

00:08:30.639 --> 00:08:33.539
to share projects, but not having the energy

00:08:33.539 --> 00:08:35.940
to sit down and write a full blog post from scratch.

00:08:37.299 --> 00:08:39.720
And I also thought like, well, you know, this

00:08:39.720 --> 00:08:46.500
isn't something that I can, you know, I can use

00:08:46.500 --> 00:08:49.000
now. It was something I wish I had earlier, right?

00:08:50.570 --> 00:08:54.250
this is if if ai was available to us at the time

00:08:54.250 --> 00:08:58.590
when i was starting out um this kind of tool

00:08:58.590 --> 00:09:01.470
really helped and it's not to say that i have

00:09:01.470 --> 00:09:04.490
any regrets there but just saying someone new

00:09:04.490 --> 00:09:06.610
who's just starting out they can use this tool

00:09:06.610 --> 00:09:11.350
so if you're new in the coding field you just

00:09:11.350 --> 00:09:16.330
started out to become a programmer today you

00:09:16.330 --> 00:09:20.699
want to be able to share your work with your

00:09:20.699 --> 00:09:28.980
recruiters or your teammates right and i just

00:09:28.980 --> 00:09:32.139
think like if it's something that i wanted to

00:09:32.139 --> 00:09:34.139
use now and i wish i could have used earlier

00:09:34.139 --> 00:09:36.740
someone else has the same feeling and if they're

00:09:36.740 --> 00:09:39.220
starting out as well they can be going through

00:09:39.220 --> 00:09:40.860
the same set of motions that i'm going through

00:09:40.860 --> 00:09:45.879
right um because everybody wants to share their

00:09:45.879 --> 00:09:49.149
work but just having to do all of that extra

00:09:49.149 --> 00:09:55.269
work to um make it sound english right um for

00:09:55.269 --> 00:09:59.710
my or any language for that matter right um you

00:09:59.710 --> 00:10:07.149
want your code to tell a story which uh you don't

00:10:07.149 --> 00:10:10.309
want to spend enough i mean you want to maybe

00:10:10.309 --> 00:10:13.870
focus on the next project and go to story just

00:10:13.870 --> 00:10:17.350
takes care of this I would say manual work for

00:10:17.350 --> 00:10:20.629
you. It's manual work for me. It could be something

00:10:20.629 --> 00:10:23.889
that other people enjoy doing. And usually if

00:10:23.889 --> 00:10:26.710
you're a developer, for me, I'm an analyst and

00:10:26.710 --> 00:10:32.429
I don't enjoy, you know, just telling a story

00:10:32.429 --> 00:10:34.710
all the time. There are times when I wish there's

00:10:34.710 --> 00:10:37.629
some automations there. So something like this

00:10:37.629 --> 00:10:40.570
tool would definitely help, right? You know,

00:10:40.610 --> 00:10:43.350
an analyst, data scientist, something like this

00:10:43.350 --> 00:10:46.789
helps, right? And for me, it was taking like

00:10:46.789 --> 00:10:50.029
three to five hours to write something thoughtful.

00:10:52.210 --> 00:10:54.230
It's not because it takes actually three to five

00:10:54.230 --> 00:10:58.129
hours. It's just procrastination. And as someone

00:10:58.129 --> 00:11:01.990
who loves to build, it just feels like a bottleneck

00:11:01.990 --> 00:11:06.730
to me. Because I knew I had the code. I knew

00:11:06.730 --> 00:11:09.950
I had the insights. I just didn't want to spend

00:11:09.950 --> 00:11:13.740
a whole afternoon formatting paragraphs. And

00:11:13.740 --> 00:11:16.299
with GPT -4, I just realized I didn't have to.

00:11:18.059 --> 00:11:22.340
But I didn't want the output to feel generic.

00:11:23.179 --> 00:11:26.980
So I built this multi -select system. Now I can

00:11:26.980 --> 00:11:29.879
choose exactly what tone I want. Maybe one day

00:11:29.879 --> 00:11:33.059
I want to sound technical. Maybe another day

00:11:33.059 --> 00:11:38.700
I want to be more poetic, right? And that kind

00:11:38.700 --> 00:11:42.120
of flexibility is available in the app. You can

00:11:42.120 --> 00:11:45.759
obviously add more emotions to it. Train your

00:11:45.759 --> 00:11:49.879
AI to do that. So let's try to break this code

00:11:49.879 --> 00:11:57.139
down in plain English. First, we import the Streamlit

00:11:57.139 --> 00:12:00.259
library and OpenAI library and a few helper packages.

00:12:01.159 --> 00:12:04.879
So we set up the Streamlit app UI and input area.

00:12:05.940 --> 00:12:09.759
Then we let the user pick options for tone, emotion

00:12:09.759 --> 00:12:13.059
and structure. And when the user hits generate,

00:12:13.360 --> 00:12:20.000
the app builds a custom GPT -4 prompt. And so

00:12:20.000 --> 00:12:23.820
it then sends that prompt to GPT -4 using the

00:12:23.820 --> 00:12:28.480
OpenAI Python client. And GPT -4 then replies

00:12:28.480 --> 00:12:33.220
with a formatted blog post. So we then pass that

00:12:33.220 --> 00:12:37.789
text and render it inside the app. and it's about

00:12:37.789 --> 00:12:40.549
100 lines of code but it creates something that

00:12:40.549 --> 00:12:45.850
feels like magic so i mean you i'm sure you've

00:12:45.850 --> 00:12:49.009
written longer pieces of code in your uh career

00:12:49.009 --> 00:12:52.210
so career but 100 lines of code is not too much

00:12:52.210 --> 00:12:56.730
but the thing is it creates something which really

00:12:56.730 --> 00:13:03.809
feels like you know an uber cool thing um so

00:13:03.809 --> 00:13:06.049
let's look at some use cases for this here's

00:13:06.049 --> 00:13:09.379
how you might end up using code to story pro

00:13:09.379 --> 00:13:12.480
so you i already talked about some others but

00:13:12.480 --> 00:13:16.519
just wanna put it in a section right so you're

00:13:16.519 --> 00:13:19.100
applying for jobs and you want to turn your portfolio

00:13:19.100 --> 00:13:22.639
project into a blog you want to teach something

00:13:22.639 --> 00:13:26.580
technical but don't want to start from scratch

00:13:26.580 --> 00:13:31.399
you're a pm or a founder who received some code

00:13:31.399 --> 00:13:37.450
and want a quick summary in plain english or

00:13:37.450 --> 00:13:40.389
if you're giving a talk and want to create a

00:13:40.389 --> 00:13:45.129
script or show notes from your code you get to

00:13:45.129 --> 00:13:49.029
decide that tone that makes it incredibly flexible

00:13:49.029 --> 00:13:55.730
so what's next for this what's next for code

00:13:55.730 --> 00:13:59.850
to story Pro so I'm working on a few things where

00:13:59.850 --> 00:14:04.230
which is including like let users upload dot

00:14:04.230 --> 00:14:07.750
py files directly instead of copy pasting uh

00:14:07.750 --> 00:14:10.649
right now it's a copy paste thing so that is

00:14:10.649 --> 00:14:14.610
something i'm working on and adding image generation

00:14:14.610 --> 00:14:22.509
so basically turning code into diagrams um again

00:14:22.509 --> 00:14:25.929
you'll want your call to tell story and i'm aiming

00:14:25.929 --> 00:14:31.529
to do i'd like more emotion and that piece too

00:14:32.360 --> 00:14:35.899
an image right so turn an emotionally engaging

00:14:35.899 --> 00:14:39.419
code into diagrams right in a way and integrate

00:14:39.419 --> 00:14:42.139
with blogging platforms so you can one click

00:14:42.139 --> 00:14:48.059
publish that would be ideal that would be something

00:14:48.059 --> 00:14:50.019
that would take an extended period of time i

00:14:50.019 --> 00:14:55.259
think but that'd be an interesting use case and

00:14:55.259 --> 00:15:00.990
maybe letting you train a custom tone like your

00:15:00.990 --> 00:15:04.149
voice your style so right now there's like more

00:15:04.149 --> 00:15:09.129
inbuilt tones right um it's like more hard -coded

00:15:09.129 --> 00:15:12.830
tones so more custom tones like how you want

00:15:12.830 --> 00:15:18.450
to exactly sound um and if you're someone who

00:15:18.450 --> 00:15:22.690
creates technical content i want this to be a

00:15:22.690 --> 00:15:29.549
secret weapon if you're turning your technical

00:15:29.549 --> 00:15:34.370
code into really amazing stories well the world

00:15:34.370 --> 00:15:43.669
is world is yours so if i were to reflect we

00:15:43.669 --> 00:15:47.230
are entering an age where communication matters

00:15:47.230 --> 00:15:51.909
more now than ever and ai isn't just for generating

00:15:51.909 --> 00:15:57.850
code anymore it's helping us explain share and

00:15:58.379 --> 00:16:02.980
connect so the way we tell stories around our

00:16:02.980 --> 00:16:08.980
code can change careers it can build communities

00:16:08.980 --> 00:16:14.379
and now it doesn't have to take hours so with

00:16:14.379 --> 00:16:18.379
code to story pro you don't just generate documentation

00:16:18.379 --> 00:16:26.220
you generate meaning so thanks for listening

00:16:26.649 --> 00:16:29.269
and if you want to try code to story pro just

00:16:29.269 --> 00:16:33.230
drop me a message i will be adding uh the link

00:16:33.230 --> 00:16:36.029
to what i've already built it's a medium blog

00:16:36.029 --> 00:16:39.370
and you can check it out you need a medium account

00:16:39.370 --> 00:16:42.649
for this uh but if you want it for you know if

00:16:42.649 --> 00:16:44.990
you don't have a medium account just drop me

00:16:44.990 --> 00:16:48.529
a ping on my sub stack so that is another place

00:16:48.529 --> 00:16:53.669
where i'm planning to put this code out Just

00:16:53.669 --> 00:16:56.970
so you don't need a medium account and the Substack

00:16:56.970 --> 00:17:00.889
one is for free. So just drop me a message there.

00:17:01.029 --> 00:17:04.589
Again, links to both will be there in the show

00:17:04.589 --> 00:17:09.349
notes. And I'd love your feedback. And if this

00:17:09.349 --> 00:17:13.470
resonated with you, please share it with a fellow

00:17:13.470 --> 00:17:19.829
builder, a creator or a writer. And until next

00:17:19.829 --> 00:17:25.410
time, just... keep building keep writing and

00:17:25.410 --> 00:17:31.849
keep telling the stories that the code wants

00:17:31.849 --> 00:17:34.990
you to tell because you are amazing