►
Description
In this 11-minute developer-focused demo, Luis Mañez delivers a clear overview of DALL-E capabilities and billing model. Access Open AI API of DALL-E 2, create an account, generate an API key. Next create an image first by calling image API from Postman, then via the SPFx web part. Save image to document library. Step through the web part code – uses SPFx to call API, PnPjs to save image to library, base64 encoding.
This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 9, 2023.
Demo Presenter
• Luis Mañez (ClearPeople) | @luismanez
Supporting materials
• Sample - Image generation using DALL-E API | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-dall-e-image-generation
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
I'm
gonna
show
you
how
we
can
use
the
daily
image
generator
API
from
from
spfx
from
a
SharePoint
web
part.
First
of
all,
a
very
quick
about
me.
My
name
is
Luis
manyev
I
work
as
a
chef
architect
at
Clear
people
UK
based
company,
although
I'm
working
from
Spain
I'm,
a
Microsoft
MVP
in
and
365
development,
and
also
a
usual
contributor
in
this
amazing
Community,
you
can
find
me
in
Social
Network,
as
Luis
Manus,
so
feel
free
to
pin
me
I'm,
always
happy
to
the
chat.
B
Okay,
I'm
sure
we
all
know,
but
just
in
case
value.
2
is
an
AI
system
that
can
create
images
and
from
a
description
in
natural
language,
and
actually
it
has
four
main
features
and
the
most
well
known
for
service
the
image
generation.
So
you
can
enter
a
text
description
and
it
generates
an
an
email.
So
you
say
something
like
an
asteroid
riding
a
horse
in
a
photorealistic
style
and
you
get
an
image
of
an
astronaut
and
kind
of
a
horse
and
also
the
second
main
feature
is
that
you
can
expand
on
existing
image.
B
B
This
is
not
for
free
I
mean
when
you
create
your
account
likely
you're
gonna
get
some
free
credits
and
I
think
this
is
still
working
that
way.
But
after
that,
you
obviously
need
to
pay
and
and
you're
gonna
pay
per
image
generated
in
in
this
case,
and
also
per
the
resolution
of
that
of
that
image.
There's
currently
three
support
resolutions.
B
Api
you're
gonna
need
to
do
a
pause
request
to
API
openai.com,
the
one
images
Generations
and
in
the
body
you
need
to
include
the
test
description
of
the
image
and
the
maximum
length
is
1000
characters.
The
number
of
images
you
want
to
generate
the
maximum
is
10
images
in,
in
one
request,
also
the
size
of
the
images,
and
you
have
three
options
like
small,
medium
or
large.
Let's
say,
and
also
the
response
format.
B
B
A
B
B
So
well,
if
you
click
in
the
in
the
image
and
yeah.
Also
there's
another
there's
another
request
here,
so
you
just
can
see
the
the
result
in
the
case
that
you
are
asking
for
a
base64
data
in
the
response.
So
this
is
the
image
in
base64
format.
Okay,
lesson
painting
to
the
web
part,
so
web
part
is
running
in
the
in
the
local
government.
Currently,
so,
let's
Center
an
image
description,
so
I
have
here
some
prompts,
let's
say
some
money.
B
So
let's
generate
a
couple
of
images
and
in
the
small
size,
so
we
click
on
generate
images.
And
hopefully
we
should
get
a
couple
of
images:
yeah,
an
old
painting
by
Matisse
of
a
human
and
robot
playing
chess,
very
nice,
and
also-
and
you
can
click
on
the
image
and
they
might
is
save
to
the
documents
Library.
So
we
can
open
the
image
and
if
we
go
to
the
document
Library,
it
should
be
there.
A
B
B
B
So,
first
of
all,
I
just
created
a
couple
of
classes
for
modeling,
then
image
request
and
response.
So
in
the
request
you
can
see,
I
have
the
problem,
the
number
of
images
size
and
and
response
format,
and
also
the
same
for
the
for
the
response,
with
the
different
images
in
in
an
array
and
in
my
case
I'm
using
the
base64,
because
actually,
when
using
the
the
URL
format,
I
wasn't
able
to
change
the
image
source
attribute
when
getting
the
response
from
the
API
I.
B
B
This
is
the
class
that
is
actually
dealing
with
the
daily
API
and
also
the
SharePoint,
so
I'm
using
Independence
injection
so
I'm,
using
the
service
scope
and
also
I'm
using
the
HTTP
client
from
spfx
to
call
the
the
API-
and
you
can
see
here-
are
the
different
imports
from
the
of
some
pmbis
library
to
deal
with
SharePoint
in
order
to
save
the
images.
So
just
a
couple
of
methods
generate
images
and
say
very
much
to
to
the
document
Library
in
the
case
of
the
service
in
the
Constructor.
B
Again,
I'm
just
resolving
the
different
services
from
the
DI
container,
and
also
configuring
the
the
PMP
yes
and,
as
you
can
see,
the
safety
match
to
the
site,
assets
Library,
it's
just
using
PMP,
so
I'm,
getting
the
documents,
library
and
adding
the
the
file
and
after
that,
I'm
just
getting
the
the
full
URL
of
the
Image
store
in
in
SharePoint
and
the
main
method
for
generating
the
images.
When
calling
Valley
is
this
one?
B
Now
we
are
already
in
the
in
the
spfx
web
part.
So
if
you
only
need
a
method,
I'm
configuring,
all
the
dis
stuff
with
the
services
scope
and
also
the
PMP
and
and
my
service,
and
which
is
passed
to
a
real
component
in
the
react
component.
We
have
a
bunch
of
fluent
UI
controls
for
the
UI,
the
text
area
and
slider
and
so
on,
and
then
we
have
here
the
the
method
that
is
getting
the
request
using
the
the
service
nothing
to
to
fancy
here.
B
And
finally,
this
is
the
code
that
is
getting
the
the
URL
of
sorry,
the
base64
image
and
I'm
rendering
in
the
in
the
screen.
The
interesting
part
here
is
that
I'm
converting
the
basis,
the
forestry
into
a
to
a
Blog
in
the
in
the
browser
and
getting
the
the
URL.
These
are
these
three
lines
on
here
and
to
convert
the
basis
DeForest
train
to
block
I'm,
just
using
a
third-party
package
installed
using
npm,
which
is
called
blog
util,
which
actually
has
quite
a
few
utilities
around
around
blocks.