Skip to content

Commit 2222384

Browse files
committed
Updated David's blogpost and edited Contact
1 parent 13dd36f commit 2222384

File tree

8 files changed

+16
-70
lines changed

8 files changed

+16
-70
lines changed

content/contact/index.md

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ sections:
99
content:
1010
title: Contact
1111
text: |-
12-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus augue non tempor egestas. Proin nisl nunc, dignissim in accumsan dapibus, auctor ullamcorper neque. Quisque at elit felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean eget elementum odio. Cras interdum eget risus sit amet aliquet. In volutpat, nisl ut fringilla dignissim, arcu nisl suscipit ante, at accumsan sapien nisl eu eros.
12+
Contact Nicole Brewer for more information!
1313
1414
phone: 888 888 88 88
1515
address:
@@ -23,9 +23,7 @@ sections:
2323
latitude: '37.4275'
2424
longitude: '-122.1697'
2525
directions: Enter Building 1 and take the stairs to Office 200 on Floor 2
26-
office_hours:
27-
- 'Monday 10:00 to 13:00'
28-
- 'Wednesday 09:00 to 10:00'
26+
2927
appointment_url: 'https://calendly.com'
3028
#contact_links:
3129
# - icon: comments
@@ -47,23 +45,4 @@ sections:
4745
design:
4846
columns: '1'
4947

50-
- block: markdown
51-
content:
52-
title:
53-
subtitle: ''
54-
text:
55-
design:
56-
columns: '1'
57-
background:
58-
image:
59-
filename: contact.jpg
60-
filters:
61-
brightness: 1
62-
parallax: false
63-
position: center
64-
size: cover
65-
text_color_light: true
66-
spacing:
67-
padding: ['20px', '0', '20px', '0']
68-
css_class: fullscreen
6948
---

content/posts/20-12-01-wowchemy-prize/index.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
22
title: Exploring Network Visualization in Jupyter Notebooks
33
date: 2024-01-12
4+
authors: ["namita_shah", "admin"]
45
---
56

67
Exploring Network Visualization in Jupyter Notebooks: A Comparison of ipycytoscape and ipysigma
78

8-
9-
109
## INTRODUCTION
1110

1211
In the realm of data science and network analysis, Jupyter Notebooks have become an increasingly popular platform for exploring and visualizing complex relationships. When dealing with large datasets, we'll compare two prominent network visualization libraries for Jupyter Notebooks—ipycytoscape and ipysigma—in the context of our use case.
Loading
Binary file not shown.

content/posts/20-12-02-ICML-best-paper/index.md

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,23 @@ title: IPyWidgets v Dash for GUI Image Processing
33
date: 2023-12-02
44
image:
55
focal_point: 'top'
6+
authors: ["david_costello", "admin"]
67
---
78

8-
### Paragraph 1
9-
10-
##### Outline
11-
12-
Setup the need for using a graphical user interface to process an image (drag and drop, etc...) as mouse manipulation is more intuitive than keyboard manipulation in many cases.
13-
14-
##### Paragraph
9+
### Introduction
1510

1611
During Summer 2023, I was working on a research project. I was trying to create a piece of software that would allow the user to take in a Greek Manuscript, like [this one](https://digital.bodleian.ox.ac.uk/objects/403c2c20-5072-4ad2-831d-a43edbdfcf47/surfaces/ec0c1ff3-8d5a-4d55-bcc5-5a02963adc34/), and then, using the software, produce a computer-generated transcription of the text inside, a classic [Optical Character Recognition problem](https://en.wikipedia.org/wiki/Optical_character_recognition). Because there's not just one set of tools to do this work, I wanted to collect them all under one software umbrella. In theory, it would be an end-to-end experience that would allow users to process images for an OCR engine, like [Tesseract](https://en.wikipedia.org/wiki/Tesseract_(software)), to both train on and transcribe without the software user having to ever write a single line of code. Therefore, it seemed best to create a Graphical User Interface so that users could actually 'interact' with images through the software while using Python code to do the computational work needed. In order to create the GUI using Python, I needed a simple library that could do a lot of the heavy lifting for me. That's why I started programming with the IPyWidgets library.
1712

18-
### Paragraph 2
19-
20-
##### Outline
21-
22-
Explain IPyWidgets
23-
24-
- open source
25-
- simple bootstrap components with community developed widgets
26-
- integrated well with some libraries (HoloViz, Voila, etc...)
27-
- meant to operate as Python code
28-
29-
##### "Paragraph"
30-
13+
### IPyWidgets
3114
There were a lot of reasons to use the [IPyWidgets](https://ipywidgets.readthedocs.io/en/stable/) library. Using IPyWidgets, I could create a GUI that would run on pretty much any system that was able to run an internet browser. This is because IPyWidgets is built off of the main languages for Web Development: JavaScript, HTML, and CSS. Several things that are done by these languages are wrapped for Python use in the IPyWidgets library and are able to run with a live Python kernel, meaning that users can click buttons and tweak some sliders while a Python script can take those changes as inputs and give the user an immediate result. This means that IPyWidgets is a wonderful plug-and-play library for developers who are new to GUI development, which I was at the time. However, there were some hiccups.
3215

3316
#### Model View Controller Digression
3417

3518
> One of the most common patterns for developing software applications with a graphical interface is the Model-View-Controller ( or MVC) pattern. Any application developed with this pattern in mind separates the application into three components with different purposes. The *model* handles data structures and data manipulations. The *view* is what the user sees and interacts with. The *controller* is the part of the application that allows the model and the view components to communicate with each other, sort of like a switchboard operator receiving a call and making sure the right recipient is connected to it. An example would be a video game where users, viewing a gameplay scenario, input commands to move a character and the model, ordered by the controller, updates the view after doing the necessary computation to change what the environment looks like during movement. If you want to learn more about this software pattern, you can start [here](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller).
3619

37-
The centerpiece of my application is the interactive image processing. Python has several libraries which are good for non-interactive image processing such as [OpenCV](https://opencv.org/) and [PIL](https://pillow.readthedocs.io/en/stable/). Beyond the functionality in these libraries, I wanted users to be able to draw a line over text in a manuscript image and then associate the coordinates of that line with a manual transcription to create training data for Tesseract to use. **[THIS IS WHERE AN IMAGE IS NEEDED]** Using the model-view-controller pattern, I wanted the lines drawn over the image, as a change in view, to be connected to the controller that could then cause a change in the model to store data. However, this was not possible with IPyWidgets. There is [a widget](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html#image) in the IPyWidgets library that displays an image but does not allow users to draw on the image. There was an [interactive graph element](https://holoviews.org/reference/streams/bokeh/BoxEdit.html) compatible with IPyWidgets that could be hooked into the application controller that could theoretically use an image as a background element, but, due to an unfixed bug, I could not make the element work. After trying out multiple different libraries, I settled on [Dash](https://dash.plotly.com/) because it had a [robust web element](https://dash.plotly.com/annotations) capable of allowing users to annotate images and accessing that annotation with the application controller while the application was running. So I needed to learn the new library.
20+
The centerpiece of my application is the interactive image processing. Python has several libraries which are good for non-interactive image processing such as [OpenCV](https://opencv.org/) and [PIL](https://pillow.readthedocs.io/en/stable/). Beyond the functionality in these libraries, I wanted users to be able to draw a line over text in a manuscript image and then associate the coordinates of that line with a manual transcription to create training data for Tesseract to use. <!---**[THIS IS WHERE AN IMAGE IS NEEDED]** --> Using the model-view-controller pattern, I wanted the lines drawn over the image, as a change in view, to be connected to the controller that could then cause a change in the model to store data. However, this was not possible with IPyWidgets. There is [a widget](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html#image) in the IPyWidgets library that displays an image but does not allow users to draw on the image. There was an [interactive graph element](https://holoviews.org/reference/streams/bokeh/BoxEdit.html) compatible with IPyWidgets that could be hooked into the application controller that could theoretically use an image as a background element, but, due to an unfixed bug, I could not make the element work. After trying out multiple different libraries, I settled on [Dash](https://dash.plotly.com/) because it had a [robust web element](https://dash.plotly.com/annotations) capable of allowing users to annotate images and accessing that annotation with the application controller while the application was running. So I needed to learn the new library.
3821

39-
### Paragraph 3(?)
40-
41-
##### Outline
42-
43-
Explain Dash
44-
45-
- privately owned and developed
46-
- provides python shell for javascript and html
47-
- integrated with the open source plotly library
48-
- meant to operate without global variables
49-
50-
Describe problems and solutions
51-
52-
- callback functions forcing updates automatically - global variables
53-
- stateless paradigm making it difficult to save data - dummy output
54-
55-
##### Paragraph
22+
### Dash
5623

5724
Dash is owned and maintained by Plotly, a company that makes its money by selling licenses for the Enterprise version of Dash. Because of this, Dash is a very well maintained library that has limited integrations with other Python libraries. Unfortunately, IPyWidgets is not one of the libraries compatible with Dash. Though Dash is similar to IPyWidgets, in that it wraps HTML, JavaScript, and CSS for use in Python scripts, it has some differences. One big difference is that an application built using Dash has to run on a server, whether that is a local server or a remote server. Further, Dash is meant to be used with a *stateless* approach for web applications. In abstract, a web application built with a stateless approach is run on a server where the server processes user requests and input and returns an output without the server saving any of the data sent by the user or any of the output generated by the server. In practice, this stateless approach meant that Dash did not handle global variables in Python very well and it required a few creative workarounds. Considering that I was trying to create locally stored data using my application, the lack of saving within the server proved to be very difficult to work with. All of the code I had already developed needed to be ported over into the Dash context.
5825

@@ -64,21 +31,17 @@ There were two main problems that I had when porting my pre-existing code to the
6431

6532
- global variables to avoid forcing updates and callbacks
6633
- dummy output for callbacks not intended to affect the view
67-
-
6834

69-
### Paragraph 4(?)
7035

71-
##### Outline
36+
### Dash vs. IPyWidgets
7237

73-
Why Dash over IPyWidgets?
38+
##### Why Dash over IPyWidgets?
7439

7540
- Dash had a useful widget that I needed while IPyWidgets did not
7641
- IPyWidgets is more restrictive in its layout and styling
7742
- Dash is privately maintained, so many elements of it are likely to just work together
7843

79-
##### Paragraph
80-
81-
Why IPyWidgets is still worth considering
44+
##### Why IPyWidgets is still worth considering
8245

8346
- The Python focus is more in line with certain use cases, especially in research contexts, where the stateless paradigm is unnecessarily obtuse and, in fact, difficult to program with it in mind
8447
- Dash is a walled garden in some sense, keeping its integrations pretty tightly controlled while IPyWidgets has a lot of possible interconnections that Dash just doesn't

content/publication/costello-23-1/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ publication: "US-RSE Conference"
99
doi: "10.5281/zenodo.10645469"
1010
---
1111

12+
13+
2.14 MB
Loading

content/publication/shah-23/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ publication: "US-RSE Conference"
99
doi: "10.5281/zenodo.10645467"
1010
---
1111

12+
### Abstract:
13+
14+
Researchers are increasingly using web applications to promote their work in an accessible and engaging format. By leveraging interactive visualizations and intuitive interfaces, researchers can effectively share their data and code within the scientific community. RSEs may be interested in working with researchers to build web applications that have the potential to improve code and data reuse. Despite the value of these communication tools, maintaining them eventually falls to the researchers who are not incentivized to learn new tools and technologies. We present a network analysis visualization tool that is demonstrative of how an existing research workflow in a Jupyter Notebook can be transformed into complex web applications without leaving the JupyterLab development environment. This application uses Jupyter widgets (ipywidgets) to add interactive components - such as buttons, dropdown menus - and a network visualization widget (ipycytoscape) to visually explore and analyze a large citation network. Voila strips away code cells, leaving behind only interactive browser components, resulting in a fully-fledged user interface. By adapting existing workflows, researchers working with RSEs can benefit from the familiarity of the codebase and the development environment. This helps them maintain the application beyond the period of collaboration. Based on our experience, we recommend that researchers and RSEs consider the adoption of Jupyter Notebook and Jupyter widgets to transform existing workflows into intuitive, interactive, and aesthetic web applications that can effectively communicate their research findings.

0 commit comments

Comments
 (0)