Bonjour,
Je viens dutiliser JupyterLite associé a Github Page pour deployer mon appli python.
L’appli s’ouvre et est active bien plus rapidement qu’en passant par Render ou Heroku *free.
Par contre, on voit le code puisque c’est une sorte de JupyterLab… c’est un peu déroutant pour l’utilisateur…
Ce serait super si les développeurs de JupyterLite ajoutaient un bouton voila au menu …
Qu’en pensez-vous ?
A+
David
I may be missing something in the translation, you are saying that you are seeing code still?
Did you deploy with Voici correctly? See Voici repo and ‘How to make your own deployment’ on the Voici demo page (also linked from the main repo). You also need to make sure you are using the correct URL when you open the deployed page to get the Voici render version and not the notebook. That part looks similar to the Voila URL when using MyBinder with Voila. (There’s an example endpoint in the demo, see below.)
For now that setting up JupyterLite to work with Voici is a bit more involved so that there isn’t just a button in all JupyterLite deployments to switch the interface. More importantly, Voici is only about two weeks old.
There is a button on the Voici demo page that you can click and see a demo running inside your browser right now. (This is the direct link to the demo.)
Thanks a lot for Your Response fomithgez,
Since I’m trying to start my application with Voici… that looks great… but finally failed
My Notebook have to get information in a csv file… I put this csv file near the notebook, in the ‘content’ directory… wich is in my repo :
This is the localisation of my repo :
[https://github.com/dfialaire/Test3_Voici](https://github.com/dfialaire/Test3_Voici/blob/e337e1e96071aec305e8a06232eceede87eafe74/content/Entreprises_Complet2.csv)
But Voici give me a FileNotFoundError …for the csv file from different configuration :
FileNotFoundError: [Errno 44] No such file or directory: '[https://github.com/dfialaire/Test3_Voici/blob/e337e1e96071aec305e8a06232eceede87eafe74/content/Entreprises_Complet2.csv](https://github.com/dfialaire/Test3_Voici/blob/main/content/Entreprises_Complet2.csv)'
FileNotFoundError: [Errno 44] No such file or directory: '[https://dfialaire.github.io/Test3_Voici/main/content/Entreprises_Complet2.csv](https://dfialaire.github.io/Test3_Voici/main/content/Entreprises_Complet2.csv)'
FileNotFoundError: [Errno 44] No such file or directory: '[https://github.com/dfialaire/Test3_Voici/tree/main/content/Entreprises_Complet2.csv](https://github.com/dfialaire/Test3_Voici/tree/main/content/Entreprises_Complet2.csv)'
Do you have yet experimented this issue ? To get the URL of a file using Voici ?
If you can help, it would be great. Thank You.
David
I’m not specifically following what you mean, “To get the URL of a file using Voici?”
When Voivi starts up with your Lieux_de_stages.ipynb notebook, the first thing I see is:
FileNotFoundError: [Errno 44] No such file or directory: '/files/Entreprises_Complet2.csv'
And that seems to be an accurate error. Looking at here , Entreprises_Complet2.csv is in the ‘content’ directory’ with your notebook. So why not in your notebook have?
Donnees,longueur_Donnees=Recup_Donnees("./Entreprises_Complet2.csv")
Or try:
Donnees,longueur_Donnees=Recup_Donnees("Entreprises_Complet2.csv")
I suspect if things don’t work in the first cell to get the data, all the other errors follow from that and so start there to debug.
Note that the jupyterlite sync mechanism between the running kernel and the browser storage is rather complex, and somewhat fragile, depending on which browser you are in, how many “things” it’s trying to do at once, etc. It’s worth looking at what the full browser console log shows when these things happen: e.g. open a new tab, expand the log, then run the whole thing.
I think it’s probably more reasonable to move this to the upstream repo, where the maintainers are more likely to be able to answer the question more fully, and might have more insights into what information to ask for.
I already tried this :
Donnees,longueur_Donnees=Recup_Donnees("./Entreprises_Complet2.csv")
and also this :
Donnees,longueur_Donnees=Recup_Donnees("Entreprises_Complet2.csv")
…
Both didn’t work.
In fact, I’ve tried all this :
Donnees,longueur_Donnees=Recup_Donnees(“ttps://github.com/dfialaire/Test3_Voici/main/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“ttps://github.com/dfialaire/Test3_Voici/blob/main/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“ttps://dfialaire.github.io/Test3_Voici/blob/main/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“ttps://dfialaire.github.io/Test3_Voici/main/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“ttps://github.com/dfialaire/Test3_Voici/tree/main/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“…/content/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“files/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“…/…/…/files/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“…/…/files/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“…/files/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“…/…/voici/render/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“./Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“./Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“/files/Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“.\Entreprises_Complet2.csv”) # …
Donnees,longueur_Donnees=Recup_Donnees(“.\Entreprises_Complet2.csv”) # …
Donnees,longueur_Donnees=Recup_Donnees(“.\…\…\files\Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“.....\files\Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“Entreprises_Complet2.csv”)
Donnees,longueur_Donnees=Recup_Donnees(“./Entreprises_Complet2.csv”)
No one worked.
So I think that my csv file is in an other folder created by Voici…
In Github, when we do a commit, then, in the Action, we can see that this commit is starting a build phase, then a deploy phase… A the end of those 2 phase, Github is writing : Artifacts : 1
When we click on this ’ 1 '… Github show us the end of the page with the acces to our downloading Github_Pages’s Archive :
When I download this archive, I get :
Then, This is what is in the voici’s folder :
Folder:build ; Folder:render ; Folder:tree ; and File:index.html
And this is what is, then, in the render’s folder :
File:Lieux_de_stages.html
In fact, there is only 1 place where I can find my Notebooks and also in the same place my csv’s file and my png’s file : this place is the folder ‘file’ which is in the archive…
This folder ‘file’ gets all the file of my “content” file in Github : it get this :
Entreprise_complet2.csv ; Lieux_de_stages.ipynb ; requirements.txt ; titre2.png …
…
So, normaly i would say that if the Linux server is reading my Notebook, and so trying to open the csv’s file, it should find this csv in the same folder !.. But nothing work !?..
Importantly, for all the cases you try with ‘https://’ at the start, I don’t think that is the correct URL. In general. you always want to point at at the raw version of files at GitHub when fetching them. So in your case, it’d be:
https://raw.githubusercontent.com/dfialaire/Test3_Voici/main/content/Entreprises_Complet2.csv
Now, I don’t think that would have made things work with your earlier trials as you weren’t building in fetching it yet. (Worse yet, none of my fetching ideas worked either, see below.)
Tagging off what Nick (@bollwyvl) said, it looks like the issue is already posted about as an issue, I think. It gets confusing, but I think ‘local file’ would refer to your CSV file. If I’m understanding things right.
And I recall this was an early hurdle with JupyterLite, and so I thought the workarounds that worked there, may work here. I’m was referring to here and read on from there. (Either way, I think that post is pertinent as it touches on locating files.) That old issue thread was from back JupyterLite was more nascent than it is now.
However, nothing I tried worked. I even was trying some things open_url that came from pyodide-http that used to work with pyscript, but failed in my attempts.
I think we have to wait until a working example comes along.
Thank You formightez for Your Help,
This issue seems complex…
well, it seems it is not possible, actualy, to open an csv file from an extern URL in JupyterLite…
I tried this in jupyterLite :
import pandas, pyodide
url = “Entreprises_Complet2.csv - Google Drive” # Lien Google drive
pandas.read_csv(pyodide.http.open_url(url))
I get this error :
EmptyDataError: No columns to parse from file
That’s strange because when go go threw this url directly, we have the data…
I also tried with other extern url like :
url = “https://raw.githubusercontent.com/Peter-Fialaire/Voici_test4/main/content/Entreprises_Complet2.csv”
url = “Microsoft OneDrive - Access files anywhere. Create docs with free Office Online.” # Lien Onedrive
Nothing worked yet…
I hope this issue will get a solution… because I really hope we had a Voici (Voila) GithubPage reading data like csv or png… files.
Have a good Day
JupyterLite works. It’s the filesystem in Voici that doesn’t seem to be working or is not working like we expect. That’s what needs fixing or an example. (Sorry, Voici is very cutting edge as the repo warns. It seems only the basics work so far. I’m sure this issue at Voici will be sorted soon, but it may be a few more weeks.)
The issues you are having with your CSV that is causing No columns to parse from file may be that it isn’t a CSV, per se. csv means comma separated values. You need to specify the separator using the option of sep = ';' in your pd.read_csv(). (I’ll get back below to using that simpler with a typical, full Python kernel running on a remote computer.)
You need to specify the separator in JupyterLite, too, The below variation on your code works in JupyterLite well:
import pandas, pyodide
url = "https://raw.githubusercontent.com/Peter-Fialaire/Voici_test4/main/content/Entreprises_Complet2.csv"
df = pandas.read_csv(pyodide.http.open_url(url), sep=";")
df.head()
(You’ll want to learn about code blocks for posting in Discourse. It keeps your code useable by others as well as showing the formatting correctly. Look into using the ‘</>’ button the the posting toolbar just above the window where you type a message here or see here particularly under ‘Block code formatting’ section on how you can write it directly in the markdown post so you don’t need to use the button.)
Specifying the separator using the option of sep = ';' in pd.read_csv() was what I was using developing ; you can see it had worked in typical, full Python kernel here where it is running in a remote computer (provided via MyBinder service) that Pandas .read_csv() method is able to directly access GitHub. That ability won’t work when it is running inside your browser where it has to first fetch the file to inside the virtual system because of security around running code and tasks inside the browser.
Hi,
Thank You for your help fomightez,
and effectively I tried, as you said, to add the argument sep to the request for reading the csv file…
So,
…==> it worked well : I had a frame printed. So, in this JupyterLite environnement, we can open
a csv’s file wich is coming from an external url (raw data from Github repo)
import pandas as pd
import pyodide
url = “https://raw.githubusercontent.com/Peter-Fialaire/Voici_test4/main/content/Entreprises_Complet2.csv”
Data_Frame = pd.read_csv(pyodide.http.open_url(url), sep=“;”)
Data_Frame
==> I get 1 first error with pandas…
==> ==> So I just had to add pandas to the environment.yml: like this :
name: voici
channels:
==> Then I got a 2nd error with pyodide : ModuleNotFoundError: No module named ‘pyodide’
==> ==> I tried to put pyodide in the environment.yml : it didn’t worked…
==>==> I also tried to install pyodide with piplite, like this :
import piplite
await piplite.install([“pyodide”])
…I’m not sure… perhaps it’s ridiculous to do this… but it didn’t work…
Definitely not ridiculous to try it. But you are seeing the same thing as me.
Right now that won’t work. I had tried all that last night. That’s what I said two posts ago about being hopeful that combining using the raw github link and open_url and variations might work. But frustratingly didn’t.
The developers need to fix this issue or show us by an example.
Until that time you have to include the data inside the Voici notebook-basis page. I have an example here where I have your CSV file as a string inside the notebook to illustrate an option of how to get the data into Pandas in Voici for now:
Yeah ! You’re right…
For the moment… just have to put the data in the notebook…
And it work !!!..
(https://peter-fialaire.github.io/Voici_test4/voici/render/Lieux_de_stages.html?#close)
Well… this is not the final presentation form… But for now… that’s great for the JupyterLite/Voici !
The position of my element had to be precised…( and also there is no image import… so I have to replace some elements)
Thank you so much, fomightez, for your help !
Yes, I wouln’t invest anytime converting everything yet unless you absolutely need it right now in Voici and cannot use Voila via MyBinder. This issue will be rectified shortly I believe. I’m confident because it works in JupyterLite that it’s not an insurmountable hurdle for those know what they are doing.
Building in the images in a workaround is possible, too. There’s at least two ways I suspect may work if you point at an image you need I can probably show you at least one working route.
That’s right I think the underlying Service Worker that allows for the kernel to manipulate the files does not seem to fetched correctly for now (404). But it’s tracked in that issue.
For those coming upon this thread, loading the data into a Voici app from a separate CSV file is now covered in the ‘Development-indiators’ example at The Gallery of Voici Dashboards.
The Voici Gallery is announced in the latest blog post about Voici (December 2023).