You want to generate OEDepict images from SMILES using your web browser. This examples works in Python 2 & 3.
The code for this example is on GitHub, as it requires multiple files. You must clone the code from https://github.com/oess/python-cookbook-simple-oeviz/. Learn more about GitHub here. From the command line run:
prompt > git clone https://github.com/oess/python-cookbook-simple-oeviz/
After cloning you should create a Python virtualenv environment which includes the OpenEye Python Toolkit and Flask. Flask can be installed with pip install flask. Finally start the Flask web server:
(myvirtualenv) prompt > python simpe-oeviz.py
Now visit http://127.0.0.1:5000 with your browser and enter a SMILES string to visualize it.
OERenderMolecule writes a file, this is not required on a web server, as writing and then reading the file adds an unnecessary step. Instead you build your image up then write it to a string using OEWriteImageToString then return this directly to the browser with a MIME type and it will render the file for you.
There are two main functions in
simple-oeviz.py. The first is
depict() which tells Flask that when someone requests
the route of the website,
/, to render the template
oeviz.html. You can find this file in the templates directory, it is
depict_smiles() is where OEDepict TK comes in. When
/smiles/<smiles>/ is requested by the browser Flask will call
this function. It passes the value of smiles as a variable where OESmilesToMol will attempt to parse the value. If it
is a valid SMILES strings we depict the molecule, if it is not we place an error message on the OEImage we have already
created. Finally we return this to the browser with MIME information so it knows the data should be treated as an SVG
image. You will notice the SMILES string is wrapped with an
unquote, this is to escape URL encodings for example
%23, which is not valid SMILES notation.
static/oeviz.js, to listen to the keystrokes in the text box. After each keystroke it sends the
contents to the SMILES API and returns the response to the img tag in the HTML, which displays the image to the user,
either a valid molecule or an error message.