From 7a8fb3449d63583d71ad0f78625dd95aa136aedd Mon Sep 17 00:00:00 2001 From: Corentin Date: Thu, 7 Oct 2021 09:02:43 +0900 Subject: [PATCH] Update dependencies and add blog --- .gitignore | 3 +- .../Deep Learning Framework Benchmarks.md | 135 ++++++++++ assets/theme/dark.css | 13 + assets/theme/light.css | 13 + index.html | 4 +- package.json | 19 +- server.js | 93 ++++--- src/actions.js | 90 ++++++- src/blog.css | 28 ++ src/blog.jsx | 56 ++++ src/blog_entry.jsx | 57 ++++ src/blog_entry.scss | 81 ++++++ src/home.jsx | 50 ++++ src/index.jsx | 5 +- src/lang/en.json | 7 +- src/lang/jp.json | 7 +- src/main.css | 251 +++++++++--------- src/main.jsx | 103 +++---- src/reducers.js | 47 +++- webpack.base.js | 159 +++++++++-- webpack.dev.js | 40 +-- webpack.prod.js | 19 +- 22 files changed, 948 insertions(+), 332 deletions(-) create mode 100644 assets/blog/2021-10-07_Deep Learning Framework Benchmarks/Deep Learning Framework Benchmarks.md create mode 100644 assets/theme/dark.css create mode 100644 assets/theme/light.css create mode 100644 src/blog.css create mode 100644 src/blog.jsx create mode 100644 src/blog_entry.jsx create mode 100644 src/blog_entry.scss create mode 100644 src/home.jsx diff --git a/.gitignore b/.gitignore index 65a4864..6b6d602 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ public *.jpg *.svg *.log -*.lock \ No newline at end of file +*.lock +*.zip \ No newline at end of file diff --git a/assets/blog/2021-10-07_Deep Learning Framework Benchmarks/Deep Learning Framework Benchmarks.md b/assets/blog/2021-10-07_Deep Learning Framework Benchmarks/Deep Learning Framework Benchmarks.md new file mode 100644 index 0000000..393cf2d --- /dev/null +++ b/assets/blog/2021-10-07_Deep Learning Framework Benchmarks/Deep Learning Framework Benchmarks.md @@ -0,0 +1,135 @@ +# Deep Learning Framework Benchmark +*Posted on October, 7 2021* + +## Preambule + +There are few frameworks to work on Deep Learning neural networks, I used to be very familiar with Tensorflow back in the days when the second version was not yet released. As someone with software engineering background the strictness and clarity of this first version of Tensorflow was a joy. Also the graph outputed by tensorboard were amazing to the point of getting the habits of debugging my networks from tensorboard most of the time. + +
+ +### Graph showed in tensorboard from Tensorflow version 1 + +![Tensorboard graph from version 1](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/tf1_graph.png) +![Network graphfrom version 1](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/tf1_graph_network.png) +![Train modules graph from version 1](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/tf1_graph_train.png) + +
+ +Those days are gone, now a new era of dynamic programming came to the Deep Learning field with PyTorch becoming increasingly popular (from what I have experienced), the second version of Tensorflow converging to the same API and Jax going a step further with near-python programming paradigm. The dynamic paradigm has some very nice points, especially if you do reinforcement learning it makes things way easier. + +There are also other frameworks I haven't yet tested like [MXNet](https://mxnet.apache.org/versions/1.8.0/). + +Now most of the frameworks I have experienced have nearly the same API and ONNX brings a very nice way to output the final result of trainings independently of the framework. Thus choosing which one to use is getting less clear than before. + +Lately I have been trying out some RNN-like network with different modification to improve the infamous *long term memory* problem (Hopefully I will post something about that latter). Using PyTorch I feel very frustrated that the included [LSTM layer](https://pytorch.org/docs/stable/generated/torch.nn.LSTM.html) was running very well but **an equivalent code would run several times slower** (around 1/3), even following the [official documentation on GPU optimizations](https://pytorch.org/blog/optimizing-cuda-rnn-with-torchscript/) (which seems deprecated on few points), sometimes too the point of going at 10% of the initial speed. So if I want to do some research I might as well choose a framework that wouldn't work so slow I would need to wait for hours a training that could be performed in minutes. But would other frameworks really give me better performance? + +I decided to see for myself how the different framework behave, starting from simple operations and hopefully testing up to whole network trainings. + +I will use a naming convention for the frameworks (also called platform in my scripts) tested here: + +* TF1 : first version of Tensorflow (verion 1.x), as of this writting the latest version is 1.15 +* TF2 : second version of Tensorflow (verion 2.x), as of this writting the latest version is 2.6 +* TF2_V1 : second version of Tensorflow but using the compatibility API to write as the first version, also disabling the dynamic behaviour (I suspected different performance) +* Torch : PyTorch +* Jax + + +## Benchmarking implementation + +### No Gradient + +This is obvious but PyTorch is very nice for the majority of the time were you need to compute gradients but not here as I started with the most simple operations first. The `requires_grad=False` argument on all tensors does the trick on PyTorch while Tensorflow and Jax don't need any additional care as far as I know. + +### Warmup + +I have experienced many time on all framework so far that the first run is always several time slower, this is obvious for dynamically allocated tensors of the modern frameworks but I strongly remember this happened too when I was using TF1. To avoid the first run to skew the benchmark each experiment has a small warmup loop: + +``` +# warmup +for _ in range(20): + self.experiment() +``` + +### Optimizations + +I had to test with **random tensor at start and before each operation** to be sure that frameworks do not optimize out some already made operations (could be cache), especially since I disabled gradient computation. All my tests showed no difference so I stuck with tensors initially filled with ones. + +### Benchmark time + +Each operation is benchmarked during an "experiment", to get consistent benchmarking time a first loop is done to estimate the number of operation per second then the loop being benchmarked is run with a fixed number of step from the estimation. This allows to set in a configuration file the time per experiment for statistical stability and avoid unnecessary call to the system clock (CPython not being know for its speed I'd rather have a simple integer increment per loop as overhead). + +Latter this could also make a progression bar with ETA possible as the benchmarks can be quiet exhaustive. + +## Results + +**The code is publicly available [here](https://gitlab.com/corentin-pro/dl_bench). It will output raw data as csv files and their plots. All the data and plot from my machine (NVIDIA GeForce RTX 2060 SUPER) can be downloaded [here](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/gpu_NVIDIA%20GeForce%20RTX%202060%20SUPER.zip).** + +
+ +### Experiment benchmark samples + +![Benchmark results for Torch with the matmul operation](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_torch_matmul_float32.png) +![Benchmark results for Jax with the dense layer](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_jax_nn_dense_float32.png) + +
+ +As expected the bigger the operations (experiments) the better [GFLOPS](https://en.wikipedia.org/wiki/FLOPS) (Giga floating point operations per second) the GPU can output. So far nothing unexpected. + +### Comparisons + +Comparison plots are also generated from the experiment data, for now the only comparison are done between 'platforms' (aka framework) but data type comparisons could be interesting in the future. Categories were made to plot subsets of comparisons in order to keep the scale of the y axis linear, the script will automatically switch to logarithmic scale if needed in the general case. The categories are ranges of Mop (Milions of operations) per experiment like `MEDIUM = [20, 1000]` (there is SMALL, MEDIUM, LARGE and VERY_LARGE) and can be changed in the configuration files. + +
+ +### Comparison samples + +![Comparison of the add operation](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_add_float32.png) +![Comparison of the dense layer for the MEDIUM category](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_nn_dense_float32_MEDIUM.png) +![Comparison of 5 dense layer in sequence for the VERY_LARGE category](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_nn_dense_x5_float32_VERY_LARGE.png) + +
+ +**NOTE** : all operations with the `nn` prefix means that it is run inside a 'module' (or equivalent), in Jax for instace I used `stax` and `jit` as intended by the library. JIT is not needed as far as I tested for Torch. + +Torch seems the best for simple and small operation while tensorflow in general seems to have big overheads. Jax does very well once we use the JIT. All frameworks tends to converge more with bigger layers/operations, the XLA based Tensorflow and Jax seems to have slightly better performance there. But for small operations Torch can be orders of magnitude faster! + +The result between float32 and float16 are very similar but float64 is different: + +* For some reasons TF2 didn't accept matmul on float64 inside a module, I should fix that latter +* TF2 get better results relatively to other platforms +* Except for element-wise operations, Torch doesn't have its lead on small operations +* There is a weird behaviour for the matmul of 800x800 tensors both in Torch and TF2. After additional testing I couldn't figure out why the first runs (even after warmup) were way to fast. + +The specific behaviour of the 800x800 matmul in the data (see `run times (s)`) looks like : + +``` + experiment run times (s) count ms/matmul Mop/matmul GFLOPS +300 800x800 @ 800x800 0.03258013725280762 60 0.5430022875467936 1022.72 1883.4543121733468 +[...] +308 800x800 @ 800x800 0.032579898834228516 60 0.5429983139038086 1022.72 1883.4680952272229 +309 800x800 @ 800x800 0.03258252143859863 60 0.5430420239766439 1022.72 1883.316492728723 +310 800x800 @ 800x800 0.1323096752166748 60 2.2051612536112466 1022.72 463.7846771183555 +311 800x800 @ 800x800 0.2970736026763916 60 4.951226711273193 1022.72 206.55891148579838 +312 800x800 @ 800x800 0.29687929153442383 60 4.947988192240397 1022.72 206.6941068298959 +[...] +329 800x800 @ 800x800 0.2968714237213135 60 4.947857062021892 1022.72 206.69958472528631 +``` + +It is the only instance of such a behavior across all operations and even within the matmul benchamrk. Because of this the result plot doesn't look great : + +![Comparison of the flaot64 matmul operation (LARGE category)](/blog/2021-10-07_Deep%20Learning%20Framework%20Benchmarks/result_matmul_float64_LARGE.png) + + +## Conclusion + +The results so far confort me into using Torch overall as I usually design small networks but Jax seems to be a very interesting contender. I am surprise the difference on small/medium operations could be that significant between Torch and TF2, I sometimes use my DL framework for GPU accelerated math in other context so it is interesting. + +The code is not yet complete and in the future I would like to test for more: + +* Convolutions : 1d, 2d, transpose +* Gradient +* Optimizer +* RNN : which was the trigger that started all of this +* Data transfert? (CPU->GPU and GPU->CPU) + +If you have questions or remarks you can contact me or reply the [reddit post]() (TO BE INSERTED). \ No newline at end of file diff --git a/assets/theme/dark.css b/assets/theme/dark.css new file mode 100644 index 0000000..540bc51 --- /dev/null +++ b/assets/theme/dark.css @@ -0,0 +1,13 @@ +:root +{ + --main-bg-color: #21262b; + --main-fg-color: #b0b0b0; + --lighter-bg-color: #31363b; + --lighter-fg-color: #d0d0d0; + --highlight-bg-color: #41464b; + --highlight-fg-color: #e0e0e0; + --dim-bg-color: rgba(255, 255, 255, 0.1); + + --main-primary-color: hsl(213, 35%, 65%); + --light-primary-color: hsl(213, 35%, 45%); +} \ No newline at end of file diff --git a/assets/theme/light.css b/assets/theme/light.css new file mode 100644 index 0000000..19be3bc --- /dev/null +++ b/assets/theme/light.css @@ -0,0 +1,13 @@ +:root +{ + --main-bg-color: #e0e0e0; + --main-fg-color: #41464b; + --lighter-bg-color: #c8c8c8; + --lighter-fg-color: #31363b; + --highlight-bg-color: #b0b0b0; + --highlight-fg-color: #21262b; + --dim-bg-color: rgba(0, 0, 0, 0.1); + + --main-primary-color: hsl(213, 35%, 45%); + --light-primary-color: hsl(213, 35%, 65%); +} \ No newline at end of file diff --git a/index.html b/index.html index 498213c..2de1ba8 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,8 @@ AYO Inc. - AI solution for business - - + + diff --git a/package.json b/package.json index 4d67bce..b27ad49 100644 --- a/package.json +++ b/package.json @@ -10,19 +10,22 @@ "@babel/preset-env": "^7.7.1", "babel-loader": "^8.0.6", "babel-plugin-inferno": "^6.1.0", - "compression-webpack-plugin": "^3.0.0", + "compression-webpack-plugin": "^9.0.0", "inferno": "^7.3.2", "inferno-redux": "^7.3.3", + "inferno-router": "^7.4.10", "redux": "^4.0.5", - "webpack": "^4.41.2", - "webpack-cli": "^3.3.10" + "webpack": "5.56.1", + "webpack-cli": "^4.8.0" }, "devDependencies": { - "copy-webpack-plugin": "^5.1.1", - "css-loader": "^3.4.0", - "file-loader": "^5.0.2", - "style-loader": "^1.1.2", - "webpack-dev-server": "^3.9.0" + "copy-webpack-plugin": "^9.0.1", + "css-loader": "^6.3.0", + "marked": "^3.0.4", + "sass": "^1.42.1", + "sass-loader": "^12.1.0", + "style-loader": "^3.3.0", + "webpack-dev-server": "^4.3.1" }, "scripts": { "build": "webpack --config webpack.prod.js", diff --git a/server.js b/server.js index 9e1a244..98aa3b1 100644 --- a/server.js +++ b/server.js @@ -1,9 +1,8 @@ -const fs = require('fs'); -const http = require('http'); -const path = require('path'); -const url = require('url'); +const fs = require('fs') +const http = require('http') +const path = require('path') -const port = 8080; // Prefer port > 1024 to avoid super-user permission +const port = 8080 // Prefer port > 1024 to avoid super-user permission const server = http.createServer((request, response) => { const mimeType = { @@ -13,50 +12,58 @@ const server = http.createServer((request, response) => { '.svg': 'image/svg+xml', '.css': 'text/css', '.json': 'application/json' - }; + } const mimeEncoding = { '.gz': 'gzip', - }; - let pathname = 'public' + url.parse(request.url).pathname; - fs.exists(pathname, function (exist) { - if(!exist) + } + let pathname = 'public' + decodeURI(request.url) + if(!fs.existsSync(pathname) || fs.statSync(pathname).isDirectory()) + { + // If the file is not found, return 404 + // response.statusCode = 404 + // response.end(`File ${pathname} not found!`) + // return + pathname = 'public/index.html' + } + // If is a directory, then look for index.html + // else if (fs.statSync(pathname).isDirectory()) { + // pathname += 'index.html' + // } + + if(!fs.existsSync(pathname)) + { + // If the file is not found, return 404 + response.statusCode = 404 + response.end(`File ${pathname} not found!`) + return + } + + // Read file from file system + fs.readFile(pathname, function(error, data){ + if(error) { - // If the file is not found, return 404 - response.statusCode = 404; - response.end(`File ${pathname} not found!`); - return; + response.statusCode = 500 + response.end(`Error getting the file: ${error}.`) } - // If is a directory, then look for index.html - if (fs.statSync(pathname).isDirectory()) { - pathname += '/index.html'; + else + { + // Based on the URL path, extract the file extention. e.g. .js, .doc, ... + const extension = path.parse(pathname).ext + // Set Content-Type + response.setHeader('Content-Type', mimeType[extension] || 'text/plain' ) + // If the file is found, set Content-Encoding + if(mimeEncoding[extension]) + { + response.setHeader('Content-Encoding', mimeEncoding[extension]) + } + response.end(data) } - // Read file from file system - fs.readFile(pathname, function(error, data){ - if(error) - { - response.statusCode = 500; - response.end(`Error getting the file: ${error}.`); - } - else - { - // Based on the URL path, extract the file extention. e.g. .js, .doc, ... - const extension = path.parse(pathname).ext; - // Set Content-Type - response.setHeader('Content-Type', mimeType[extension] || 'text/plain' ); - // If the file is found, set Content-Encoding - if(mimeEncoding[extension]) - { - response.setHeader('Content-Encoding', mimeEncoding[extension]); - } - response.end(data); - } - }); - }); -}); + }) +}) server.listen(port, (error) => { if (error) { - return console.log(`Server cannot listen port ${port} :`, error); + return console.log(`Server cannot listen port ${port} :`, error) } - console.log(`Server is listening on port ${port}`); -}); + console.log(`Server is listening on port ${port}`) +}) diff --git a/src/actions.js b/src/actions.js index 88b99f1..5df36c7 100644 --- a/src/actions.js +++ b/src/actions.js @@ -1,24 +1,24 @@ export const themeActions = { - THEME_CHANGE: 'THEME_CHANGE' + CHANGE: 'THEME_CHANGE' } export const changeTheme = (new_theme) => ({ - type: themeActions.THEME_CHANGE, + type: themeActions.CHANGE, theme: new_theme }) export const langActions = { - LANG_CHANGE_REQUEST: 'LANG_CHANGE_REQUEST', - LANG_CHANGE_RESPONSE: 'LANG_CHANGE_RESPONSE' + CHANGE_REQUEST: 'LANG_CHANGE_REQUEST', + CHANGE_RESPONSE: 'LANG_CHANGE_RESPONSE' } export const changeLang = (new_lang) => ({ - type: langActions.LANG_CHANGE_REQUEST, + type: langActions.CHANGE_REQUEST, lang: new_lang }) export const receiveLang = (new_lang, strings) => ({ - type: langActions.LANG_CHANGE_RESPONSE, + type: langActions.CHANGE_RESPONSE, lang: new_lang, strings: strings }) @@ -47,4 +47,82 @@ export const fetchLang = (new_lang) => { dispatch(changeLang(null)) }) } +} + +export const blogActions = { + LIST_REQUEST: 'BLOG_LIST_REQUEST', + LIST_RESPONSE: 'BLOG_LIST_RESPONSE', + ENTRY_REQUEST: 'BLOG_ENTRY_REQUEST', + ENTRY_RESPONSE: 'BLOG_ENTRY_RESPONSE' +} + +export const blogListRequest = () => ({ + type: blogActions.LIST_REQUEST, +}) + +export const blogListResponse = (list = []) => ({ + type: blogActions.LIST_RESPONSE, + list: list +}) + +export const fetchBlogList = () => { + return (dispatch, getState) => { + const state = getState() + if(state.blog.list_requesting) + { + return + } + dispatch(blogListRequest()) + return fetch('/blog_list.json') + .then((response) => { + if(!response.ok) + { + console.log('Couldn\'t fetch blog_list.json') + throw Error(response.statusText) + } + return response.json() + }) + .then(json => { + dispatch(blogListResponse(json)); + }) + .catch(() => { + dispatch(blogListResponse()) + }) + } +} + +export const blogEntryRequest = () => ({ + type: blogActions.ENTRY_REQUEST, +}) + +export const blogEntryResponse = (name= null, entry = null) => ({ + type: blogActions.ENTRY_RESPONSE, + entry: entry, + name: name +}) + +export const fetchBlogEntry = (entry_date, entry_name) => { + return (dispatch, getState) => { + const state = getState() + if(state.blog.entry_requesting) + { + return + } + dispatch(blogEntryRequest()) + return fetch('/blog/' + entry_date + '_' + entry_name + '/' + entry_name + '.html') + .then((response) => { + if(!response.ok) + { + console.log('Couldn\'t fetch blog entry : ' + entry_name) + throw Error(response.statusText) + } + return response.text() + }) + .then(text => { + dispatch(blogEntryResponse(entry_name, text)) + }) + .catch(() => { + dispatch(blogEntryResponse()) + }) + } } \ No newline at end of file diff --git a/src/blog.css b/src/blog.css new file mode 100644 index 0000000..c821e6a --- /dev/null +++ b/src/blog.css @@ -0,0 +1,28 @@ +.blog +{ + flex-grow: 1; + width: 100%; + padding: 20px; +} + +.blog > a +{ + display: flex; + text-decoration: none; + max-width: 1000px; + margin: 20px auto; + padding: 10px; + background-color: var(--dim-bg-color); +} + +.blog a h2 +{ + flex-grow: 1; + margin: 20px 60px 20px 40px; +} + +.blog a .date +{ + font-size: 0.7em; + align-self: end; +} \ No newline at end of file diff --git a/src/blog.jsx b/src/blog.jsx new file mode 100644 index 0000000..c0798b5 --- /dev/null +++ b/src/blog.jsx @@ -0,0 +1,56 @@ +`use strict` +import { Component } from 'inferno' +import { Link } from 'inferno-router' +import { connect } from 'inferno-redux' + +import { fetchBlogList } from './actions' + +import './blog.css' + + +class BlogComponent extends Component +{ + componentDidMount() + { + if(this.props.blog_list.length === 0) + { + this.props.fetchBlogList() + } + } + + render() + { + return ( +
+ {this.props.blog_list.map((blog_info, index) => { + return ( + +

+ {blog_info.name} +

+ + {this.props.strings.publish_date + + new Date(blog_info.date).toLocaleDateString()} + + + ) + })} +
+ ) + } +} + + +const mapStateToProps = state => ({ + strings: state.lang.strings, + blog_list: state.blog.list +}) + +const mapDispatchToProps = dispatch => ({ + fetchBlogList: () => dispatch(fetchBlogList()) +}) + +export default connect( + mapStateToProps, + mapDispatchToProps +)(BlogComponent) \ No newline at end of file diff --git a/src/blog_entry.jsx b/src/blog_entry.jsx new file mode 100644 index 0000000..a93c460 --- /dev/null +++ b/src/blog_entry.jsx @@ -0,0 +1,57 @@ +`use strict` +import { Component } from 'inferno' +import { connect } from 'inferno-redux' + +import { fetchBlogList, fetchBlogEntry } from './actions' + +import './blog_entry.scss' + + +class BlogEntryComponent extends Component +{ + constructor(props) { + super(props) + this.entry_date = this.props.match.params.entry_date + this.entry_name = this.props.match.params.entry_name + } + + componentDidMount() + { + if(this.props.blog_list.length === 0) + { + this.props.fetchBlogList() + } + if(this.props.blog_entry_name !== this.entry_name) + { + this.props.fetchBlogEntry(this.entry_date, this.entry_name) + } + } + + render() + { + return ( +
+
+ ) + } +} + + +const mapStateToProps = state => ({ + strings: state.lang.strings, + blog_list: state.blog.list, + blog_entry: state.blog.entry, + blog_entry_name: state.blog.entry_name +}) + +const mapDispatchToProps = dispatch => ({ + fetchBlogList: () => dispatch(fetchBlogList()), + fetchBlogEntry: (entry_date, entry_name) => dispatch(fetchBlogEntry(entry_date, entry_name)) +}) + +export default connect( + mapStateToProps, + mapDispatchToProps +)(BlogEntryComponent) \ No newline at end of file diff --git a/src/blog_entry.scss b/src/blog_entry.scss new file mode 100644 index 0000000..2e4b675 --- /dev/null +++ b/src/blog_entry.scss @@ -0,0 +1,81 @@ +.blog-entry +{ + flex-grow: 1; + width: 100%; + padding: 20px; + max-width: 1200px; + line-height: 1.8rem; + font-family: "open sans", sans; + + h1, h2, h3 + { + font-weight: lighter; + margin: 8px 0; + color: var(--highlight-fg-color); + } + + h1 + { + padding: 1rem 0 1.2rem 0; + } + + h2 + { + padding: 0.5rem 0 1rem 0; + border-bottom: 1px solid var(--dim-bg-color); + } + + code, pre + { + background-color: var(--lighter-bg-color); + color: var(--lighter-fg-color); + padding: 0 4px; + } + + pre + { + padding: 10px; + } + + em + { + color: var(--lighter-fg-color); + } + + img + { + min-height: 160px; + max-height: 50vh; + width: auto; + } + + strong + { + color: var(--lighter-fg-color); + } + + .image-row + { + h3 + { + font-size: 0.9rem; + text-align: center; + font-weight: normal; + font-style: italic; + } + + p + { + display: flex; + align-items: center; + justify-content: center; + } + + img + { + margin: 0 10px; + object-fit: contain; + width: 100%; + } + } +} \ No newline at end of file diff --git a/src/home.jsx b/src/home.jsx new file mode 100644 index 0000000..5ab1b12 --- /dev/null +++ b/src/home.jsx @@ -0,0 +1,50 @@ +`use strict` +import { Component } from 'inferno' +import { connect } from 'inferno-redux' + +import { Svg } from './svg.jsx' + +import ArrowSvg from '../assets/icons/arrow_forward.svg' +import Flow1Svg from '../assets/images/undraw_maintenance_cn7j.svg' +import Flow2Svg from '../assets/images/undraw_design_data_khdb.svg' +import Flow3Svg from '../assets/images/undraw_Artificial_intelligence_oyxx.svg' + +class HomeComponent extends Component +{ + render() + { + return ( +
+
+
+ +

{this.props.strings.flow1}

+
+ +
+ +

{this.props.strings.flow2}

+
+ +
+ +

{this.props.strings.flow3}

+
+
+
+ ) + } +} + + +const mapStateToProps = state => ({ + strings: state.lang.strings +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect( + mapStateToProps, + mapDispatchToProps +)(HomeComponent) \ No newline at end of file diff --git a/src/index.jsx b/src/index.jsx index 8c0b8d1..e3796b1 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -3,7 +3,7 @@ import { render } from 'inferno' import { Provider } from 'inferno-redux'; import { applyMiddleware, createStore, combineReducers } from 'redux'; -import { langReducer, themeReducer } from './reducers'; +import { blogReducer, langReducer, themeReducer } from './reducers'; import { fetchLang } from './actions' import Main from './main.jsx' @@ -33,7 +33,8 @@ export const init_app = () => { const reducers = combineReducers({ theme: themeReducer, - lang: langReducer + lang: langReducer, + blog: blogReducer }) const store = createStore( diff --git a/src/lang/en.json b/src/lang/en.json index 9e0d840..540764e 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -6,5 +6,10 @@ "inferno_credit": "Website built with ", "flow1": "From repetitive tasks done by human", "flow2": "With the help of data gathered", - "flow3": "To automated systems" + "flow3": "To automated systems", + "section": { + "home": "Home", + "blog": "Blog" + }, + "publish_date": "Publish date : " } \ No newline at end of file diff --git a/src/lang/jp.json b/src/lang/jp.json index 0e7e5df..ebdb5e0 100644 --- a/src/lang/jp.json +++ b/src/lang/jp.json @@ -6,5 +6,10 @@ "inferno_credit": "Website built with ", "flow1": "人によって\u200b繰り返される\u200b作業", "flow2": "収集された\u200bデータ\u200b（の助け）\u200bによって", - "flow3": "システム\u200bを自動化するため" + "flow3": "システム\u200bを自動化するため", + "section": { + "home": "ホーム", + "blog": "ブログ" + }, + "publish_date": "Publish date : " } \ No newline at end of file diff --git a/src/main.css b/src/main.css index 98a09fc..834a03a 100644 --- a/src/main.css +++ b/src/main.css @@ -1,216 +1,217 @@ *, ::after, ::before { - box-sizing: border-box; + box-sizing: border-box; } a, a:visited { - color: inherit; + color: inherit; } body { - background-color: var(--main-bg-color); - color: var(--main-fg-color); - margin: 0; - font-family: sans; + background-color: var(--main-bg-color); + color: var(--main-fg-color); + margin: 0; + font-family: sans; } -body::before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - background-image: url(/assets/back.webp); - width: 100%; - height: 100%; - opacity: 0.15; - z-index: -1; -} - - @media (max-width: 420px) { - body - { - font-size: 10px; - } - .process-flow - { - padding: 3px 3vw; - } - .process-flow .svg:nth-child(even) > svg - { - width: 18px; - margin: 2px; - } + body + { + font-size: 10px; + } + .process-flow + { + padding: 3px 3vw; + } + .process-flow .svg:nth-child(even) > svg + { + width: 18px; + margin: 2px; + } } @media (min-width: 420px) and (max-width: 600px) { - body - { - font-size: 12px; - } - .process-flow - { - padding: 5px 5vw; - } - .process-flow .svg:nth-child(even) > svg - { - width: 5vw; - margin: 5px; - } + body + { + font-size: 12px; + } + .process-flow + { + padding: 5px 5vw; + } + .process-flow .svg:nth-child(even) > svg + { + width: 5vw; + margin: 5px; + } } @media (min-width: 600px) { - body - { - font-size: 14px; - } - .process-flow - { - padding: 10px 10vw; - } - .process-flow .svg:nth-child(even) > svg - { - width: 5vw; - margin: 10px; - } + body + { + font-size: 14px; + } + .process-flow + { + padding: 10px 10vw; + } + .process-flow .svg:nth-child(even) > svg + { + width: 5vw; + margin: 10px; + } } @media (orientation: portrait) { - .process-flow - { - flex-direction: column; - } - .process-flow .svg - { - height: 15vh; - } - .process-flow > .svg - { - transform: rotate(90deg) - } + .process-flow + { + flex-direction: column; + } + .process-flow .svg + { + height: 15vh; + } + .process-flow > .svg + { + transform: rotate(90deg) + } } footer > section { - display: flex; - justify-content: center; - align-items: center; - margin: 0 10px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 10px; } footer .legal div { - padding: 10px; -} - -footer .credit -{ - font-size: 0.8rem; + padding: 10px; } footer > section > div { - word-break: keep-all; + word-break: keep-all; } h1, h2, h3, h4, h5, h5 { - margin: 0; + margin: 0; + color: var(--lighter-fg-color); } main { - min-height: 100vh; - display: flex; - flex-direction: column; - min-width: 375px; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + min-width: 375px; } nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - background-color: var(--lighterbg-color); - border-bottom: 1px solid var(--highlight-bg-color); + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: var(--lighterbg-color); + border-bottom: 1px solid var(--highlight-bg-color); + word-break: keep-all; +} + +nav a +{ + text-decoration: none; } nav .actions { - display: inline-flex; - justify-content: flex-end; - align-items: center; - flex: 1 1 0; + display: inline-flex; + justify-content: flex-end; + align-items: center; } nav .main-logo { - display: inline-flex; - justify-content: center; - align-items: center; + display: inline-flex; + justify-content: center; + align-items: center; +} + +nav .sections +{ + display: inline-flex; + justify-content: center; + align-items: center; +} + +nav .sections a +{ + font-size: 1.5em; + margin: 0 20px; } svg { - fill: var(--main-fg-color); - width: auto; - height: auto; - max-width: 100%; - max-height: 100%; + fill: var(--main-fg-color); + height: auto; + max-width: 100%; + max-height: 100%; } .content { - flex-grow: 1; + flex-grow: 1; } .process-flow { - background-color: var(--lighter-bg-color); - display: flex; - justify-content: space-between; - align-items: center; + background-color: var(--lighter-bg-color); + display: flex; + justify-content: space-between; + align-items: center; } .process-flow h3 { - margin: 10px 0; - text-align: center; + margin: 10px 0; + text-align: center; } .process-flow .svg { - display: inline-flex; - justify-content: center; - align-items: center; + display: inline-flex; + justify-content: center; + align-items: center; } .toggle { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - padding: 4px; - border-radius: 12px; + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + padding: 4px; + border-radius: 12px; } .toggle:hover { - background-color: var(--highlight-bg-color); - color: var(--highlight-fg-color); - fill: var(--highlight-fg-color); + background-color: var(--highlight-bg-color); + color: var(--highlight-fg-color); + fill: var(--highlight-fg-color); } #ayo_logo { - height: 42px; + height: 42px; } diff --git a/src/main.jsx b/src/main.jsx index a550091..905ecaf 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,37 +1,26 @@ `use strict` -import { Component, version } from 'inferno' +import { Component } from 'inferno' +import { BrowserRouter, Link, Route, Switch } from 'inferno-router' import { connect } from 'inferno-redux' import { changeTheme, fetchLang } from './actions' import { Svg } from './svg.jsx' import { SvgToggle } from './svg_toggle.jsx' -import './main.css' -import LogoSvg from '../assets/logo.svg' -import LangSvg from '../assets/translate.svg' -import LightSvg from '../assets/brightness_high.svg' -import DarkSvg from '../assets/brightness_medium.svg' +import Blog from './blog.jsx' +import BlogEntry from './blog_entry.jsx' +import Home from './home.jsx' + +import './main.css' + +import LogoSvg from '../assets/icons/logo.svg' +import LangSvg from '../assets/icons/translate.svg' +import LightSvg from '../assets/icons/brightness_high.svg' +import DarkSvg from '../assets/icons/brightness_medium.svg' -import ArrowSvg from '../assets/arrow_forward.svg' -import Flow1Svg from '../assets/undraw_maintenance_cn7j.svg' -import Flow2Svg from '../assets/undraw_design_data_khdb.svg' -import Flow3Svg from '../assets/undraw_Artificial_intelligence_oyxx.svg' class MainComponent extends Component { - componentDidMount() - { - // Smooth color transitions (after rendering to avoid flash on reload) - // setTimeout(() => { - // const styleEl = document.head.getElementsByTagName('style')[0] - // document.head.appendChild(styleEl) - // const styleSheet = styleEl.sheet - // styleSheet.insertRule( - // '*, ::after, ::before { transition-property: background-color, color, fill; transition-duration: 1s;}') - // }, - // 500) - } - toggleTheme(checked) { this.props.changeTheme(checked ? 'dark' : 'light') @@ -47,51 +36,35 @@ class MainComponent extends Component return (
- -
-
-
- -

{this.props.strings.flow1}

+ + + + + + + +
+
+
{this.props.strings.company_name}
+
{this.props.strings.address_one_line}
+
{this.props.strings.email_contact}
+
+
+
) } } diff --git a/src/reducers.js b/src/reducers.js index f5c0eca..2a74635 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -1,9 +1,9 @@ -import { langActions, themeActions } from './actions.js' +import { blogActions, langActions, themeActions } from './actions.js' -export const themeReducer = (state = 'light', action) => { +export const themeReducer = (state = 'dark', action) => { switch (action.type) { - case themeActions.THEME_CHANGE: + case themeActions.CHANGE: return action.theme default: return state @@ -13,12 +13,12 @@ export const themeReducer = (state = 'light', action) => { export const langReducer = (state = {lang: 'jp', request: null, strings: null}, action) => { switch (action.type) { - case langActions.LANG_CHANGE_REQUEST: + case langActions.CHANGE_REQUEST: return { ...state, request: action.lang } - case langActions.LANG_CHANGE_RESPONSE: + case langActions.CHANGE_RESPONSE: return { ...state, lang: action.lang, @@ -28,4 +28,41 @@ export const langReducer = (state = {lang: 'jp', request: null, strings: null}, default: return state } +} + +export const blogReducer = (state = { + list: [], + list_requesting: false, + entry: null, + entry_name: null, + entry_requesting: false + }, action) => { + switch (action.type) + { + case blogActions.LIST_REQUEST: + return { + ...state, + list_requesting: true + } + case blogActions.LIST_RESPONSE: + return { + ...state, + list: action.list, + list_requesting: false + } + case blogActions.ENTRY_REQUEST: + return { + ...state, + entry_requesting: true + } + case blogActions.ENTRY_RESPONSE: + return { + ...state, + entry: action.entry, + entry_name: action.name, + entry_requesting: false + } + default: + return state + } } \ No newline at end of file diff --git a/webpack.base.js b/webpack.base.js index d5e7a5d..8acdd36 100644 --- a/webpack.base.js +++ b/webpack.base.js @@ -1,4 +1,100 @@ const path = require('path'); +const fs = require('fs'); +const marked = require('marked'); + +const CopyPlugin = require('copy-webpack-plugin'); +// const CompressionPlugin = require("compression-webpack-plugin") + +const renderer = new marked.Renderer() +renderer.link = (href, title, text) => { + if(href === null) + { + return text + } + let out = '' + return out +} +renderer.image = (href, title, text) => { + if (href === null) { + return text; + } + + let out = '' + text + ' { + compilation.hooks.processAssets.tapAsync( + { + name: plugin_name, + stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE + }, + (compilationAssets, callback) => { + let content = [] + Object.keys(compilationAssets).forEach((file_path) => { + if(file_path.startsWith('blog') && file_path.endsWith('.md')) + { + const file_name = path.basename(file_path).slice(0, -3) + const blog_info = path.basename(path.dirname(file_path)).split('_') + const blog_date = blog_info[0] + const blog_entry = blog_info.slice(1).join('_') + compilation.emitAsset( + 'blog/' + blog_date + '_' + blog_entry + '/' + file_name + '.html', + new webpack.sources.RawSource( + marked( + new TextDecoder('utf-8').decode(compilationAssets[file_path].source())))) + content.push({ + name: file_name, + date: blog_date + }) + } + }) + content.sort((x1, x2) => { x1.create_date < x2.create_date }) + compilation.emitAsset( + this.options.output_file, new webpack.sources.RawSource(JSON.stringify(content))) + return callback(); + } + ) + } + ) + } +} module.exports = { mode: "none", @@ -8,33 +104,60 @@ module.exports = { rules: [ { test: /\.jsx$/, - loader: "babel-loader", - options: - { - presets: ["@babel/preset-env"], - plugins: [ - ["babel-plugin-inferno", - { - "imports": true - }] - ] - } + exclude: /node_modules/, + use: [{ + loader: "babel-loader", + options: + { + presets: ["@babel/preset-env"], + plugins: [ + ["babel-plugin-inferno", + { + "imports": true + }] + ] + } + }] + }, + { + test: /src.*\.s[ac]ss$/, + use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /src.*\.css$/, use: ['style-loader', 'css-loader'] }, { - test: /assets.*\.(jpg|png|svg|css)$/, - loader: 'file-loader', - options: { - name: '[path][name].[ext]', - }, - }] + test: /\.svg$/, + type: "asset/inline" + } + ] }, + plugins: [ + new BlogListingPlugin(), + new CopyPlugin({ + patterns: [ + {from: 'index.html'}, + {from: 'robot.txt'}, + {from: 'src/lang', to: 'lang'}, + {from: 'assets/blog', to: 'blog'}, + {from: 'assets/icons', to: 'assets/icons'}, + {from: 'assets/images', to: 'assets/images'}, + {from: 'assets/theme', to: 'assets/theme'} + ]}), + // new CompressionPlugin( + // { + // filename: "[path].gz[query]", + // algorithm: "gzip", + // test: [/\.js/, /\.svg/], + // threshold: 1000 + // }) + ], output: { filename: 'bundle.js', - path: path.resolve(__dirname, 'public') + path: path.resolve(__dirname, 'public'), + assetModuleFilename: 'assets/[query].[ext]', + clean: true } }; diff --git a/webpack.dev.js b/webpack.dev.js index d310524..0f69c40 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,7 +1,4 @@ -const path = require('path'); const webpack = require('webpack'); -const CopyPlugin = require('copy-webpack-plugin'); -const CompressionPlugin = require("compression-webpack-plugin") const config = require('./webpack.base.js'); module.exports = Object.assign( @@ -23,47 +20,14 @@ module.exports = Object.assign( inferno: require.resolve('inferno/dist/index.dev.esm.js') } }, - plugins: [ + plugins: config.plugins.concat([ new webpack.DefinePlugin( { 'process.env': { 'DEBUG': true } // set a DEBUG flag that can be used in the scripts - }), - new CopyPlugin([ - {from: 'index.html'}, - {from: 'robot.txt'}, - {from: 'src/lang', to: 'lang'}, - {from: 'assets/public', to: 'assets'} - ]), - new CompressionPlugin( - { - filename: "[path].gz[query]", - algorithm: "gzip", - test: [/\.js/, /\.svg/], - threshold: 1000 }) - ], - // webpack-dev-server configuration - devServer: - { - contentBase: path.join(__dirname), - compress: true, - port: 8080, - // Not elegant way to get rid of the gzip path in index.html - proxy: - { - '/$': - { - target: 'http://localhost:8080', - secure: false, - bypass: function(request, response, proxyOptions) - { - return '/index_dev.html'; - } - } - } - } + ]) } ); diff --git a/webpack.prod.js b/webpack.prod.js index 62e880a..9449d21 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -1,6 +1,4 @@ const webpack = require('webpack'); -const CopyPlugin = require('copy-webpack-plugin'); -const CompressionPlugin = require("compression-webpack-plugin") const config = require('./webpack.base.js'); module.exports = Object.assign( @@ -11,27 +9,14 @@ module.exports = Object.assign( { minimize: true }, - plugins: [ + plugins: config.plugins.concat([ new webpack.DefinePlugin( { 'process.env': { 'DEBUG': false } // set a DEBUG flag that can be used in the scripts (can be skipped) - }), - new CopyPlugin([ - {from: 'index.html'}, - {from: 'robot.txt'}, - {from: 'src/lang', to: 'lang'}, - {from: 'assets/public', to: 'assets'} - ]), - new CompressionPlugin( - { - filename: "[path].gz[query]", - algorithm: "gzip", - test: [/\.js/, /\.svg/], - threshold: 1000 }) - ] + ]) } );