Lesson 6: Create a chatbot (image error)

Short Course Q&A LangChain: Chat with Your Data
1

I coped the code of lab6 of the course and I am trying to generate the UI for the chatbot, but I am getting an error. I am suspecting that the error is due to the fact that I don’t have the correct JPG image for that part. I checked the documentation, but didn’t find that file anywhere.

Here is the code:

cb = cbfs()

file_input = pn.widgets.FileInput(accept=‘.pdf’)
button_load = pn.widgets.Button(name=“Load DB”, button_type=‘primary’)
button_clearhistory = pn.widgets.Button(name=“Clear History”, button_type=‘warning’)
button_clearhistory.on_click(cb.clr_history)
inp = pn.widgets.TextInput( placeholder=‘Enter text here…’)

bound_button_load = pn.bind(cb.call_load_db, button_load.param.clicks)
conversation = pn.bind(cb.convchain, inp)

jpg_pane = pn.pane.JPG( ‘./img/convchain.jpg’)

tab1 = pn.Column(
pn.Row(inp),
pn.layout.Divider(),
pn.panel(conversation, loading_indicator=True, height=300),
pn.layout.Divider(),
)
tab2= pn.Column(
pn.panel(cb.get_lquest),
pn.layout.Divider(),
pn.panel(cb.get_sources ),
)
tab3= pn.Column(
pn.panel(cb.get_chats),
pn.layout.Divider(),
)
tab4=pn.Column(
pn.Row( file_input, button_load, bound_button_load),
pn.Row( button_clearhistory, pn.pane.Markdown(“Clears chat history. Can use to start a new topic” )),
pn.layout.Divider(),
pn.Row(jpg_pane.clone(width=400))
)
dashboard = pn.Column(
pn.Row(pn.pane.Markdown(‘# ChatWithYourData_Bot’)),
pn.Tabs((‘Conversation’, tab1), (‘Database’, tab2), (‘Chat History’, tab3),(‘Configure’, tab4))
)
dashboard

The error is happening in line
jpg_pane = pn.pane.JPG( ‘./img/convchain.jpg’)
ValueError: JPG pane cannot parse string that is not a filename or URL.

The original code in the provided lab was
jpg_pane = pn.pane.Image( ‘./img/convchain.jpg’)
but that also caused an error.

Can anyone help or provide the image file to make the application run?

2

Hi @aubmsba

Welcome to he community.

I was able to test the code that you report it and got no error message. But, i notice that you are using forward tick instead of single quotes in your code.

For example:

where the code is jpg_pane = pn.pane.Image( ‘./img/convchain.jpg’)

it should be jpg_pane = pn.pane.Image( './img/convchain.jpg')

Note that it could be a input configuration (keyboard layout) of your device or other input resources that causing this issue.

To be honest, i am not sure if it is the case here.

Never the less, try to change the forward tick wrap up for a single quotes and run the code again.

Let me know about the results in order that i be able to assist you.

Best regards
elirod

3

Thank you Elirod.

I don’t think that’s the issue. I think the problem is related to the jpg file itself.
Is that a file I should import to Google Colab or what? I couldn’t find this file anywhere in the documentation of the course.

Please advise.

4

Hi @aubmsba

The jpg file is stored on the course platform server. It is the same platform for every learner.

I tried to reproduce this error and my code run with no issues.

That means that there is something wrong in your side.

To make sure that there is no issue with the notebook we can try the follow:

image

  1. Click on the kernel pane
  2. Select “Restart & Clear output”

After that, try to run every cell one by one.

If the issue persists even doing this troubleshooting the other solution is to try to change the forward tick wrap up for a single quotes as a mention before.

Just to make it clear. I’m referring to this code cell:

cb = cbfs()

file_input = pn.widgets.FileInput(accept='.pdf')
button_load = pn.widgets.Button(name="Load DB", button_type='primary')
button_clearhistory = pn.widgets.Button(name="Clear History", button_type='warning')
button_clearhistory.on_click(cb.clr_history)
inp = pn.widgets.TextInput( placeholder='Enter text here…')

bound_button_load = pn.bind(cb.call_load_db, button_load.param.clicks)
conversation = pn.bind(cb.convchain, inp) 

jpg_pane = pn.pane.Image( './img/convchain.jpg')

tab1 = pn.Column(
    pn.Row(inp),
    pn.layout.Divider(),
    pn.panel(conversation,  loading_indicator=True, height=300),
    pn.layout.Divider(),
)
tab2= pn.Column(
    pn.panel(cb.get_lquest),
    pn.layout.Divider(),
    pn.panel(cb.get_sources ),
)
tab3= pn.Column(
    pn.panel(cb.get_chats),
    pn.layout.Divider(),
)
tab4=pn.Column(
    pn.Row( file_input, button_load, bound_button_load),
    pn.Row( button_clearhistory, pn.pane.Markdown("Clears chat history. Can use to start a new topic" )),
    pn.layout.Divider(),
    pn.Row(jpg_pane.clone(width=400))
)
dashboard = pn.Column(
    pn.Row(pn.pane.Markdown('# ChatWithYourData_Bot')),
    pn.Tabs(('Conversation', tab1), ('Database', tab2), ('Chat History', tab3),('Configure', tab4))
)
dashboard

Best regards
elirod

5

Other possible explanation regards this issue is the first code cell.

We have to run it to import the filesystem path where the jpg and other files are stored.

Make sure that this code cell was run without any issue:

import os
import openai
import sys
sys.path.append('../..') # <-This is the code that import all the course assets

import panel as pn  # GUI
pn.extension()

from dotenv import load_dotenv, find_dotenv
_ = load_dotenv(find_dotenv()) # read local .env file

openai.api_key  = os.environ['OPENAI_API_KEY']

Please, let me know the results

thank you

6

I am not trying to run the code on the platform. I am trying to run the code in a Google Colab (Jupiter Notebook) that I reproduced on my own. That’s why I am asking how can I get access to the course assets (especially the jpg file). I need that file to upload it to the notebook or link it to the notebook to make that part o the code run.

7

Oh, OK.

I’m sorry for my misunderstanding.

Unfortunately, the course assets is stored on the course environment. But you can try your experiments with your own assets. But, please, pay attentioin on your root file path in order to be able to import the files as the line code states jpg_pane = pn.pane.Image( './img/convchain.jpg').

that’s mean that your have to store your jpg asset in a folder called /img in the root path.

I hope this help’s you

best regards

8

While you are on the platform and on the chatbot tab with the .jpg file, simply right click and save the image locally. As ellrod mentions, be sure and preserve or modify the path to the jpg on your local drive.

…But I don’t think that is the problem. I have not yet managed to run it successfully on my local Jupyter notebook / conda environment either but fixing the jpg reference did not do it.

1 Like
9

Hello,
what could be the reasons for not being able to upload a own pdf file (without any response)?
What restrictions do you have?
Thank you!

10

if you want to fetch missing image for local nb just do this:

from IPython.display import Image
Image(filename='./img/convchain.jpg')

and then image “Save image as …”

1 Like