Rewrite for client side using *cifplayer* and add external ML predictions

.gitattributes

@@ -0,0 +1 @@
+*	-text

.github/workflows/deploy-to-gh-pages.yml

@@ -0,0 +1,23 @@
+name: build demo
+
+on:
+  workflow_dispatch:
+  push:
+  pull_request:
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+    - uses: hyoo-ru/mam_build@master2
+      with:
+        package: optimade/tmdne
+        modules: app
+
+    - uses: JamesIves/[email protected]
+      with:
+        branch: gh-pages
+        folder: optimade/tmdne/app/-

.gitignore

@@ -0,0 +1 @@
+-*

LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 Matthew Evans
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 Matthew Evans
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,9 +1,38 @@
-<h1 align="center">💎 <a href="thismaterialdoesnotexist.com">this-material-does-not-exist</a> 💎</h1>
+<h1 align="center">💎 <a href="https://thismaterialdoesnotexist.com">this-material-does-not-exist</a> 💎</h1>
 
 Get given random crystal structures predicted by ML materials discovery projects, and vote on whether you think it should be synthesizable (or, at least, whether it is worth trying!)
 
-Currently uses [crystaltoolkit](https://docs.crystaltoolkit.org) and data from the
+Currently uses [cifplayer](https://github.com/tilde-lab/cifplayer) and data from the
 [OPTIMADE API](https://optimade.org) for the recent [Google DeepMind
 paper](https://github.com/google-deepmind/materials_discovery).
+The physical properties prediction is done dynamically by [MPDS ML server](https://mpds.io/ml).
 
-![2023-12-10-001838_1095x878_scrot](https://github.com/ml-evs/this-material-does-not-exist/assets/7916000/678ba7ec-d929-438e-8637-3dad5bf26493)
+![GNome_d582d1239f_screenshot](https://raw.githubusercontent.com/mpds-io/this-material-does-not-exist/main/d582d1239f.png)
+
+
+## Build
+
+The `cifplayer` is powered by `$mol` framework. Note that, unlike many other frontend frameworks, `$mol` provides the same single environment for all its projects, under the standard namespace scheme. That is, all your `$mol`-based code lives inside the same directory `$MOL_HOME`. So if you don't have `$MOL_HOME` yet, please create it and navigate there
+
+```bash
+mkdir $MOL_HOME && cd $MOL_HOME
+```
+
+Then build with
+
+```bash
+npm exec mam optimade/tmdne/app
+```
+
+This will fetch the MAM server (MAM stands for the `$mol` abstract modules), clone this project, and compile it inside `optimade/tmdne/app/-/` subfolder. You will need the `web.js` bundle, that's it.
+
+
+## Develop
+
+Similarly to above, inside the `$MOL_HOME`, start the MAM dev-server with
+
+```bash
+npm exec mam
+```
+
+and navigate to http://localhost:9080, there select `optimade` namespace, then `tmdne`, then `app`. As you go through the folder structure, the selected project is being cloned and compiled on the fly, inside the corresponding subfolder of `$MOL_HOME`.

app/app.view.css

@@ -0,0 +1,8 @@
+@media all and (max-width: 850px) {
+	[optimade_tmdne_app_param_mae], [optimade_tmdne_app_param_name] { display: none; }
+	[optimade_tmdne_app_acks] { display: none; }
+}
+
+@media all and (max-height: 650px) {
+	[optimade_tmdne_app_prediction] { display: none; }
+}

app/app.view.css.ts

@@ -0,0 +1,151 @@
+namespace $.$$ {
+
+	$mol_style_define( $optimade_tmdne_app, {
+
+		overflow: 'hidden',
+		flex: {
+			direction: 'column',
+		},
+		align: {
+			items: 'center',
+		},
+
+		Player: {
+			flex: {
+				grow: 1,
+			},
+			width: '100%',
+			opacity: 1,
+			transition: 'opacity 0.15s',
+			'[optimade_tmdne_app_player_hidden]': {
+				'true': {
+					opacity: 0.1,
+				},
+			},
+		},
+
+		Head_space: {
+			position: 'absolute',
+			top: $mol_gap.block,
+			left: 0,
+			right: 0,
+			flex: {
+				grow: 1,
+			},
+			pointerEvents: 'none',
+		},
+
+		Head_card: {
+			pointerEvents: 'auto',
+			margin: 'auto',
+			width: '35%',
+			textAlign: 'center',
+		},
+
+		Head_title: {
+			userSelect: 'none',
+			justify: {
+				content: 'center',
+			},
+			font: {
+				size: '1.2rem',
+			},
+		},
+
+		Prediction: {
+			userSelect: 'none',
+			font: {
+				size: '0.7rem',
+			},
+			lineHeight: '16px',
+			flex: {
+				grow: 0,
+				wrap: 'wrap',
+			},
+			position: 'absolute',
+			left: $mol_gap.block,
+			bottom: '11rem',
+			pointerEvents: 'none',
+			opacity: 1,
+			transition: 'opacity 0.15s',
+			'[optimade_tmdne_app_prediction_hidden]': {
+				'true': {
+					opacity: 0,
+				},
+			},
+		},
+
+		Param: {
+			gap: '0.3rem',
+			flex: {
+				wrap: 'wrap',
+			},
+		},
+
+		Param_name: {
+			font: {
+				weight: 700,
+			},
+		},
+
+		Param_symbol: {
+			flex: {
+				direction: 'row',
+			},
+		},
+
+		Param_unit: {
+			flex: {
+				direction: 'row',
+			},
+		},
+
+		Param_mae_unit: {
+			flex: {
+				direction: 'row',
+			},
+		},
+
+		Param_value: {
+			gap: '0.25rem',
+		},
+
+		Foot: {
+			justify: {
+				content: 'space-between',
+			},
+			width: '24rem',
+			position: 'absolute',
+			bottom: '5.3rem',
+
+			pointerEvents: 'none',
+			transition: 'opacity 0.2s',
+			opacity: 1,
+			'[optimade_tmdne_app_foot_hidden]': {
+				'true': {
+					opacity: 0,
+				},
+			},
+			zIndex: 1,
+		},
+
+		Hint_no: {
+			pointerEvents: 'auto',
+			color: '#ff6666',
+		},
+
+		Hint_yes: {
+			pointerEvents: 'auto',
+			color: $mol_theme.current,
+		},
+
+		Acks: {
+			font: {
+				size: '0.7rem',
+			},
+			zIndex: 0,
+		},
+
+	} )
+
+}

app/app.view.tree

@@ -0,0 +1,92 @@
+$optimade_tmdne_app $mol_view
+	title \This Material Does Not Exist?
+	number? 1
+	plugins /
+		<= Theme $mol_theme_auto
+	rotating? false
+	number_swiped? 0
+	number_prefetch? 0
+	sub /
+		<= Player $optimade_cifplayer_player
+			fullscreen? => player_fullscreen?
+			attr *
+				fullscreen <= player_fullscreen?
+				optimade_tmdne_app_player_hidden <= card_holding
+			data <= json null
+			Fullscreen null
+			Overlays null
+			event *
+				pointerdown? <=> player_pointerdown? null
+				pointerup? <=> player_pointerup? null
+		<= Head_space $mol_view
+			sub /
+				<= Head_card $mol_list
+					sub /
+						<= Head_title $mol_paragraph
+							title \Does this material exist?
+		<= Prediction $mol_list
+			attr *
+				optimade_tmdne_app_prediction_hidden <= rotating
+			sub <= params /
+				<= Param* $mol_view
+					sub /
+						<= Param_name* $mol_paragraph
+							title <= param_name* \
+						<= Param_symbol* $mol_html_view
+							minimal_height <= param_min_height 22
+							html <= param_symbol* \
+						\=
+						<= Param_value* $mol_view
+							sub /
+								<= param_value* \
+								<= Param_unit* $mol_html_view
+									minimal_height <= param_min_height
+									html <= param_unit* \
+								<= Param_mae* $mol_view
+									sub /
+										\(±
+										<= param_mae* \
+										<= Param_mae_unit* $mol_html_view
+											minimal_height <= param_min_height
+											html <= param_unit* \
+										\)
+		<= Foot $mol_view
+			attr *
+				optimade_tmdne_app_foot_hidden <= rotating
+			sub /
+				<= Hint_no $mol_button_minor
+					title \ᐊ No
+					click? <=> click_no? null
+				<= Hint_yes $mol_button_minor
+					title \Yes ᐅ
+					click? <=> click_yes? null
+				^ cards / <= Card* $optimade_tmdne_card
+					name <= card_name* \
+					loaded <= card_loaded* false
+					why? <=> why*? \
+					pointer_holding? <=> card_holding? false
+					swiped_to? <=> swiped_to*? \
+					swipe_to_right => swipe_to_right*
+					swipe_to_left => swipe_to_left*
+		<= Acks $mol_view
+			sub /
+				<= Acks_a $mol_link
+					uri \https://www.optimade.org
+					sub /
+						\Powered by Optimade
+				<= Acks_b $mol_link
+					uri \https://github.com/tilde-lab/cifplayer
+					sub /
+						\and cifplayer
+				<= Acks_c $mol_link
+					uri \https://github.com/google-deepmind/materials_discovery
+					sub /
+						\using the GNome dataset
+				<= Acks_d $mol_link
+					uri \https://github.com/ml-evs/this-material-does-not-exist
+					sub /
+						\developed on GitHub
+				<= Acks_e $mol_link
+					uri \https://thispersondoesnotexist.com
+					sub /
+						\and inspired by...