From 101d8427e3f212fdb737111952687f1bc0c7a01e Mon Sep 17 00:00:00 2001
From: Eugene Dorfman <eugene.dorfman@gmail.com>
Date: Wed, 5 Aug 2026 14:30:29 +0200
Subject: [PATCH 1/2] FEAT: serve the client-side JavaScript at
 /51Degrees.core.js

The dotnet, java and rust getting-started-web examples expose the client-side
bundle as a separate resource at /51Degrees.core.js, which is the endpoint name
in the pipeline specification. Python inlined the same script into the page, so
a page copied from one of the other examples got "fod is undefined".

There is no Flask web integration in pipeline-python, so the example adds the
route itself and returns the JavaScriptBuilder output with the
application/x-javascript content type used by the other APIs.
---
 .../cloud/gettingstarted_web/app.py           | 30 +++++++++++++++++++
 .../gettingstarted_web/templates/index.html   | 17 ++++-------
 .../tests/test_cloudgettingstartedweb.py      |  9 ++++++
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py
index b92e65359..37000400f 100644
--- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py
+++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/app.py
@@ -145,6 +145,36 @@ def jsonroute():
 
         return json.dumps(flowdata.jsonbundler.json)
 
+    # Next we serve the client-side JavaScript from its own route. The other
+    # Pipeline APIs ship a web integration that intercepts '/51Degrees.core.js'
+    # for this, so the page can reference the script by that name. There is no
+    # such integration for Flask, so the example wires up the route itself.
+
+    @staticmethod
+    @app.route('/51Degrees.core.js')
+    def core_js():
+
+        # Create the flowdata object for the JavaScript route
+        flowdata = GettingStartedWeb.pipeline.create_flowdata()
+
+        # Add any information from the request (headers, cookies and additional
+        # client side provided information). Query parameters are included, so
+        # the per-request 'fod-js-enable-cookies' override is picked up here and
+        # applied by the JavaScriptBuilder engine.
+
+        flowdata.evidence.add_from_dict(webevidence(request))
+
+        # Process the flowdata
+
+        flowdata.process()
+
+        # Return the JavaScript from the JavaScriptBuilder engine
+
+        response = make_response(flowdata.javascriptbuilder.javascript)
+        response.headers["Content-Type"] = "application/x-javascript"
+
+        return response
+
     # In the main route we dynamically update the screen's device property display
     # using the above JSON route
 
diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
index cc4b2f427..a7edf68a3 100644
--- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
+++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
@@ -153,18 +153,13 @@ <h3 class="c-eg-page__heading">Client-side evidence and Apple models</h3>
 </div>
 
 {#
-    This script is constructed by the fiftyone_pipeline_core package.
-    It adds a JavaScript include for 51Degrees.core.js.
-    The 51Degrees pipeline will dynamically generate JavaScript, which includes a
-    JSON representation of the contents of flow data, i.e. the results from device detection.
-    That script raises the 'complete' event with the refined flow data. The shared
-    examples.js helper subscribes to it and appends a results table into #content.
+    51Degrees.core.js is built by the fiftyone_pipeline_core package and served by the
+    matching route in app.py. It includes a JSON representation of the contents of flow
+    data, i.e. the results from device detection, and raises the 'complete' event with the
+    refined flow data. The shared examples.js helper subscribes to it and appends a results
+    table into #content.
 #}
-{% autoescape false %}
-<script>
-{{ data.javascriptbuilder.javascript }}
-</script>
-{% endautoescape %}
+<script src="/51Degrees.core.js"></script>
 
 <script src="{{ url_for('static', filename='js/examples.min.js') }}"></script>
 <script>
diff --git a/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py b/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
index 1c1f36679..0012855d6 100644
--- a/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
+++ b/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
@@ -35,3 +35,12 @@ class CloudGettingStartedWebTests(flask_unittest.ClientTestCase):
     def test_cloud_getting_started_web(self, client):
         response = client.get('/')
         self.assertEqual(200, response.status_code)
+
+    # The page references the client-side script by the '/51Degrees.core.js' name used
+    # by the web integrations in the other Pipeline APIs, so check that the route
+    # returns the bundle rather than, for example, falling through to the page.
+    def test_cloud_getting_started_web_core_js(self, client):
+        response = client.get('/51Degrees.core.js')
+        self.assertEqual(200, response.status_code)
+        self.assertEqual("application/x-javascript", response.headers["Content-Type"])
+        self.assertIn(b"fiftyoneDegreesManager", response.data)

From e8b4e5e8aee35ea7d8c0f8979fc0e12f3d9c14eb Mon Sep 17 00:00:00 2001
From: Eugene Dorfman <eugene.dorfman@gmail.com>
Date: Wed, 5 Aug 2026 17:31:52 +0200
Subject: [PATCH 2/2] FEAT: render the device id in the server-side property
 table

Moving the client-side bundle to its own URL took the device id off the page:
it was never rendered, it only appeared incidentally inside the JSON blob of
the inlined script. Render it properly alongside the other detected properties,
matching the label and placement used by the dotnet example.
---
 .../gettingstarted_web/templates/index.html     |  3 +++
 .../tests/test_cloudgettingstartedweb.py        | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
index a7edf68a3..4d94a55c3 100644
--- a/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
+++ b/fiftyone_devicedetection_examples/src/fiftyone_devicedetection_examples/cloud/gettingstarted_web/templates/index.html
@@ -131,6 +131,9 @@ <h3 class="c-eg-page__heading">Device data</h3>
                 <tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Browser Version:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "browserversion") }}</td></tr>
                 <tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Screen width (pixels):</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "screenpixelswidth") }}</td></tr>
                 <tr class="c-eg-table__row c-eg-table__row--alt"><td class="c-eg-table__cell c-eg-table__cell--key">Screen height (pixels):</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "screenpixelsheight") }}</td></tr>
+                {# The device id identifies the matched hardware, platform and browser profiles,
+                   so it is the compact form of everything else in this table. #}
+                <tr class="c-eg-table__row"><td class="c-eg-table__cell c-eg-table__cell--key">Device Id:</td><td class="c-eg-table__cell">{{ utils.get_human_readable(data.device, "deviceid") }}</td></tr>
             </tbody>
         </table>
 
diff --git a/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py b/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
index 0012855d6..d3239b6a0 100644
--- a/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
+++ b/fiftyone_devicedetection_examples/tests/test_cloudgettingstartedweb.py
@@ -21,12 +21,18 @@
 # *********************************************************************
 
 import flask_unittest
+import re
 import unittest
 from fiftyone_pipeline_core.logger import Logger
 from fiftyone_devicedetection_examples.example_utils import ExampleUtils
 from fiftyone_devicedetection_examples.cloud.gettingstarted_web.app import GettingStartedWeb
 
 class CloudGettingStartedWebTests(flask_unittest.ClientTestCase):
+    # The test client sends no User-Agent of its own, so supply one that detection can
+    # resolve to a hardware profile.
+    CHROME_USER_AGENT = ("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
+
     # Assign the `Flask` app object
     resource_key = ExampleUtils.get_resource_key()
     logger = Logger()
@@ -36,6 +42,17 @@ def test_cloud_getting_started_web(self, client):
         response = client.get('/')
         self.assertEqual(200, response.status_code)
 
+    # The device id used to appear on the page only by accident, inside the JSON of the
+    # inlined client-side script. Now that the script is served separately, check that the
+    # page renders a real one of its own, and that detection actually found a profile
+    # rather than returning the all-zero id.
+    def test_cloud_getting_started_web_device_id(self, client):
+        response = client.get('/', headers={"User-Agent": self.CHROME_USER_AGENT})
+        self.assertEqual(200, response.status_code)
+        device_ids = re.findall(r"\d+-\d+-\d+-\d+", response.get_data(as_text=True))
+        self.assertTrue(device_ids, "No device id was rendered on the page")
+        self.assertNotIn("0-0-0-0", device_ids)
+
     # The page references the client-side script by the '/51Degrees.core.js' name used
     # by the web integrations in the other Pipeline APIs, so check that the route
     # returns the bundle rather than, for example, falling through to the page.