Pyodide<\/a> is a Python runtime in WebAssembly. It holds immense promise because it:<\/p>\n Finally, Pyodide is the engine for PyScript<\/a>\u2014a thin but convenient Pyodide wrapper that allows for the embedding of Python code into HTML. Supporting the Azure SDK for Python in Pyodide\/PyScript would allow for users to easily interact with Azure in each of the aforementioned use cases.<\/p>\n The challenge with running the Azure SDK for Python in Pyodide is networking. The main job of the SDK is to communicate with Azure via the internet. Traditional implementations of Python, such as CPython, give developers near full access to a computer’s networking functions. However, the browser’s built-in security features limit a program’s networking abilities. As such, we can’t use traditional networking libraries (think Given the browser’s networking limitations and Pyodide’s powerful JavaScript interfacing<\/a>, the best networking tool to make network requests is JavaScript’s The Next, we need to implement a Safari and Internet Explorer don’t support Some code was redacted for brevity. For the full implementation, see this gist<\/a>.<\/p>\n Now, we can use our transport directly in the browser. First, add the Pyodide CDN link<\/a> to your HTML file. Next, run the following JavaScript:<\/p>\n Or with PyScript and a little less boilerplate:<\/p>\n And you’ll see “French” displayed on your page. One last note is that we have only made an asynchronous client because there’s no synchronous version of There’s a pull request with a Pyodide-compatible transport<\/a> in the works for out-of-the-box compatibility. If you have any questions or comments, or want the pull request to be merged sooner, open an issue in the Azure SDK for Python GitHub repository<\/a>.<\/p>\n The Azure SDK for Python is architected to be modular and extensible. We can apply this architecture and extend it into Pyodide and PyScript\u2014a browser-based Python runtime, opening new doors for Azure.<\/p>\n","protected":false},"excerpt":{"rendered":" Learn how to run the Azure SDK for Python natively in the browser using Pyodide and PyScript.<\/p>\n","protected":false},"author":95870,"featured_media":2158,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[868,706,869,866,867,162],"class_list":["post-2150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure-sdk","tag-azure-core","tag-azuresdk","tag-networking","tag-pyodide","tag-pyscript","tag-python"],"acf":[],"blog_post_summary":" Learn how to run the Azure SDK for Python natively in the browser using Pyodide and PyScript.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts\/2150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/users\/95870"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/comments?post=2150"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/posts\/2150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/media\/2158"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/media?parent=2150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/categories?post=2150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/azure-sdk\/wp-json\/wp\/v2\/tags?post=2150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
requests<\/code>, aiohttp<\/code>) because they violate the browser’s rules (for example, preflight requests, forbidden headers).<\/p>\nImplementation<\/h2>\n
fetch<\/code> API<\/a>. The Azure SDK for Python is architected such that non-core<\/code> libraries, like the Text Analytics library<\/a>, rely on abstract networking pipelines to handle retries, authentication headers, and most importantly, the actual networking calls. See this post<\/a> for an in-depth explanation of the architecture. The part that performs the network calls is called a transport, and we can implement it as such using the fetch<\/code> API:<\/p>\nfrom collections.abc import AsyncIterator\r\nfrom io import BytesIO\r\nfrom typing import Any, MutableMapping, Optional\r\n\r\nimport js\r\nfrom azure.core.configuration import ConnectionConfiguration\r\nfrom azure.core.exceptions import HttpResponseError, ResponseNotReadError\r\nfrom azure.core.pipeline.transport import AsyncHttpTransport\r\nfrom azure.core.rest import AsyncHttpResponse, HttpRequest\r\nfrom requests.structures import CaseInsensitiveDict\r\n\r\nfrom pyodide import JsException, JsProxy\r\nfrom pyodide.http import FetchResponse, pyfetch\r\n\r\nclass PyodideTransport(AsyncHttpTransport):\r\n \"\"\"Implements a basic HTTP sender using the Pyodide JavaScript fetch API.\"\"\"\r\n\r\n def __init__(self, **kwargs):\r\n self.connection_config = ConnectionConfiguration(**kwargs)\r\n\r\n async def send(self, request: HttpRequest, **kwargs) -> \"PyodideTransportResponse\":\r\n \"\"\"Send request object according to configuration.\"\"\"\r\n stream_response = kwargs.pop(\"stream_response\", False)\r\n endpoint = request.url\r\n init = {\r\n \"method\": request.method,\r\n \"headers\": dict(request_headers),\r\n \"body\": request.data,\r\n \"files\": request.files,\r\n \"verify\": kwargs.pop(\"connection_verify\", self.connection_config.verify),\r\n \"cert\": kwargs.pop(\"connection_cert\", self.connection_config.cert),\r\n \"allow_redirects\": False,\r\n **kwargs,\r\n }\r\n\r\n try:\r\n response = await pyfetch(endpoint, **init)\r\n except JsException as error:\r\n raise HttpResponseError(error, error=error) from error\r\n\r\n headers = CaseInsensitiveDict(response.js_response.headers)\r\n transport_response = PyodideTransportResponse(\r\n request=request,\r\n internal_response=response,\r\n block_size=self.connection_config.data_block_size,\r\n reason=response.status_text,\r\n headers=headers,\r\n )\r\n if not stream_response:\r\n await transport_response.read()\r\n\r\n return transport_response<\/code><\/pre>\nsend<\/code> method accepts a generic HttpRequest<\/code> object and maps its attributes to a pyfetch<\/code> call. pyfetch<\/code> is Pyodide’s built-in fetch<\/code> wrapper. It also raises pyfetch<\/code> exceptions as azure.core<\/code> exceptions. This way, other libraries only have to handle azure.core<\/code> exceptions and not worry about the implementation details of the transport. Finally, the send<\/code> method maps pyfetch<\/code> response fields to a PyodideTransportResponse<\/code> object.<\/p>\nPyodideTransportResponse<\/code> class that acts as an interface between the data of the pyfetch<\/code> response and the rest of the SDK. We also need to implement a download generator class to stream the response, for which we use JavaScript’s ReadableStreamDefaultReader<\/code> API<\/a>.<\/p>\nclass PyodideTransportResponse(AsyncHttpResponse):\r\n \"\"\"Async response object for the `PyodideTransport`.\"\"\"\r\n\r\n def __init__(\r\n self,\r\n request: HttpRequest,\r\n internal_response: FetchResponse,\r\n headers: MutableMapping[str, str],\r\n block_size: int,\r\n **__\r\n ):\r\n self._block_size = block_size\r\n self._content = None\r\n self._encoding: str = \"utf-8\"\r\n self._headers = headers\r\n self._internal_response = internal_response\r\n self._is_closed = False\r\n self._request = request\r\n\r\n @property\r\n def _js_stream(self):\r\n \"\"\"Use a fresh stream every time.\"\"\"\r\n return self._internal_response.js_response.clone().body\r\n\r\n async def read(self) -> bytes:\r\n if self._content is None:\r\n parts = []\r\n async for part in self.iter_bytes():\r\n parts.append(part)\r\n self._content = b\"\".join(parts)\r\n return self._content\r\n\r\n async def iter_raw(self, **__) -> AsyncIterator[bytes]:\r\n \"\"\"Asynchronously iterates over the response's bytes. Will not decompress in the process.\"\"\"\r\n if self._content is not None:\r\n for i in range(0, len(self.content), self._block_size):\r\n yield self.content[i : i + self._block_size]\r\n else:\r\n async for part in PyodideStreamDownloadGenerator(\r\n response=self,\r\n decompress=False,\r\n ):\r\n yield part\r\n\r\n async def iter_bytes(self, **__) -> AsyncIterator[bytes]:\r\n \"\"\"Asynchronously iterates over the response's bytes. Will decompress in the process.\"\"\"\r\n if self._content is not None:\r\n for i in range(0, len(self.content), self._block_size):\r\n yield self.content[i : i + self._block_size]\r\n else:\r\n async for part in PyodideStreamDownloadGenerator(\r\n response=self,\r\n decompress=True,\r\n ):\r\n yield part\r\n\r\nclass PyodideStreamDownloadGenerator(AsyncIterator[bytes]):\r\n \"\"\"Simple stream download generator using the JavaScript reader API.\"\"\"\r\n\r\n def __init__(self, response: PyodideTransportResponse, **kwargs):\r\n self._decompress = kwargs.get(\"decompress\", False)\r\n self._block_size = response.block_size\r\n self.response = response\r\n self._stream = BytesIO()\r\n self._closed = False\r\n self._buffer_left = 0\r\n self._done = False\r\n if self._decompress and self.response.headers.get(\"enc\", None) in (\"gzip\", \"deflate\"):\r\n self._reader = response._js_stream.pipeThrough(js.DecompressionStream.new(\"gzip\")).getReader()\r\n else:\r\n self._reader = response._js_stream.getReader()\r\n\r\n async def __anext__(self) -> bytes:\r\n if self._closed:\r\n raise StopAsyncIteration()\r\n start_pos = self._stream.tell()\r\n self._stream.read()\r\n while self._buffer_left < self._block_size:\r\n read = await self._reader.read()\r\n if read.done:\r\n self._closed = True\r\n break\r\n self._buffer_left += self._stream.write(bytes(read.value))\r\n self._stream.seek(start_pos)\r\n self._buffer_left -= self._block_size\r\n return self._stream.read(self._block_size)<\/code><\/pre>\nReadableStreamDefaultReader<\/code>. For more information, see the MDN docs<\/a>.<\/p><\/blockquote>\nUsage<\/h2>\n
async function main() {\r\n pyodide = await loadPyodide();\r\n await pyodide.loadPackage('micropip');\r\n pyodide.runPythonAsync(`\r\n import micropip\r\n await micropip.install(\"azure-ai-textanalytics\") \r\n `);\r\n pyodide.runPython(`<Code for PyodideTransport, PyodideTransportResponse, PyodideStreamDownloadGenerator>`);\r\n await pyodide.runPythonAsync(`\r\n from azure.ai.textanalytics.aio import TextAnalyticsClient\r\n from azure.core.credentials import AzureKeyCredential\r\n import js\r\n client = TextAnalyticsClient(\r\n endpoint=\"https:\/\/my-endpoint.azure.com\", \r\n # We don't recommend hardcoding keys into HTML pages. Consider some other way to input your key.\r\n credential=AzureKeyCredential(MY_KEY),\r\n transport=PyodideTransport(),\r\n )\r\n documents = [\"Bonjour mon ami.\"]\r\n response = (await client.detect_language(documents=documents))[0]\r\n js.alert(response.primary_language.name) # French`);\r\n}\r\nmain();<\/code><\/pre>\n<head>\r\n<!-- See https:\/\/pyscript.net\/ for instructions to add PyScript to your page -->\r\n<\/head>\r\n<body>\r\n <py-env>\r\n - azure-ai-textanalytics\r\n <\/py-env>\r\n <py-script>\r\n <!-- code for PyodideTransport, PyodideTransportResponse, PyodideStreamDownloadGenerator -->\r\n <\/py-script>\r\n <py-script>\r\n # async\r\n # Need the above comment to have top-level await.\r\n from azure.ai.textanalytics.aio import TextAnalyticsClient\r\n from azure.core.credentials import AzureKeyCredential\r\n client = TextAnalyticsClient(\r\n endpoint=\"https:\/\/my-endpoint.azure.com\", \r\n # We don't recommend hardcoding keys into HTML pages. Consider some other way to input your key.\r\n credential=AzureKeyCredential(MY_KEY),\r\n transport=PyodideTransport(),\r\n )\r\n documents = [\"Bonjour\"]\r\n response = (await client.detect_language(documents=documents, country_hint=\"us\"))[0]\r\n print(response.primary_language.name) # French\r\n <\/py-script>\r\n<\/body><\/code><\/pre>\npyfetch<\/code>.<\/p>\nWhat now?<\/h2>\n
Conclusion<\/h2>\n