feat(composer): more interaction for gnes board

gnes/cli/parser.py

@@ -54,7 +54,6 @@ def set_composer_parser(parser=None):
                             'gnes', '/'.join(('resources', 'config', 'compose', 'default.yml'))),
                         help='yaml config of the service')
     parser.add_argument('--html_path', type=argparse.FileType('w', encoding='utf8'),
-                        default='./gnes-board.html',
                         help='output path of the HTML file, will contain all possible generations')
     parser.add_argument('--shell_path', type=argparse.FileType('w', encoding='utf8'),
                         help='output path of the shell-based starting script')

gnes/composer/base.py

@@ -292,11 +292,11 @@ def build_mermaid(all_layers: List['YamlComposer.Layer'], mermaid_leftright: boo
                 # if len(last_layer.components) > 1:
                 #     self.mermaid_graph.append('\tend')
 
-        style = ['classDef gRPCFrontendCLS fill:#FFAA04,stroke:#277CE8,stroke-width:1px;',
-                 'classDef EncoderCLS fill:#27E1E8,stroke:#277CE8,stroke-width:1px;',
-                 'classDef IndexerCLS fill:#27E1E8,stroke:#277CE8,stroke-width:1px;',
-                 'classDef RouterCLS fill:#2BFFCB,stroke:#277CE8,stroke-width:1px;',
-                 'classDef PreprocessorCLS fill:#27E1E8,stroke:#277CE8,stroke-width:1px;']
+        style = ['classDef gRPCFrontendCLS fill:#FFE0E0,stroke:#FFE0E0,stroke-width:1px;',
+                 'classDef EncoderCLS fill:#FFDAAF,stroke:#FFDAAF,stroke-width:1px;',
+                 'classDef IndexerCLS fill:#FFFBC1,stroke:#FFFBC1,stroke-width:1px;',
+                 'classDef RouterCLS fill:#C9E8D2,stroke:#C9E8D2,stroke-width:1px;',
+                 'classDef PreprocessorCLS fill:#CEEEEF,stroke:#CEEEEF,stroke-width:1px;']
         class_def = ['class %s %s;' % (','.join(v), k) for k, v in cls_dict.items()]
         mermaid_str = '\n'.join(
             ['graph %s' % ('LR' if mermaid_leftright else 'TD')] + mermaid_graph + style + class_def)

gnes/composer/flask.py

@@ -12,8 +12,7 @@
 #  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 #  See the License for the specific language governing permissions and
 #  limitations under the License.
-
-import tempfile
+import io
 
 from .base import YamlComposer
 from ..cli.parser import set_composer_parser
@@ -37,23 +36,25 @@ def _create_flask_app(self):
 
         # support up to 10 concurrent HTTP requests
         app = Flask(__name__)
+        args = set_composer_parser().parse_args([])
+        default_html = YamlComposer(args).build_all()['html']
 
         @app.route('/', methods=['GET'])
         def _get_homepage():
-            return YamlComposer(set_composer_parser().parse_args([])).build_all()['html']
+            return default_html
 
         @app.route('/generate', methods=['POST'])
         def _regenerate():
             data = request.form if request.form else request.json
             if not data or 'yaml-config' not in data:
                 return '<h1>Bad POST request</h1> your POST request does not contain "yaml-config" field!', 406
-            f = tempfile.NamedTemporaryFile('w', delete=False).name
-            with open(f, 'w', encoding='utf8') as fp:
-                fp.write(data['yaml-config'])
             try:
-                return YamlComposer(set_composer_parser().parse_args([
-                    '--yaml_path', f
-                ])).build_all()['html']
+                args.yaml_path = io.StringIO(data['yaml-config'])
+                if data.get('mermaid_direction', 'top-down').lower() == 'left-right':
+                    args.mermaid_leftright = True
+                if 'docker-image' in data:
+                    args.docker_img = data['docker-image']
+                return YamlComposer(args).build_all()['html']
             except Exception as e:
                 self.logger.error(e)
                 return '<h1>Bad YAML input</h1> please kindly check the format, indent and content of your YAML file!', 400

gnes/resources/compose/gnes-board.html

@@ -123,18 +123,22 @@
         }
     </style>
     <title>GNES Board</title>
-    <meta name="description" content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content form.">
+    <meta name="description"
+          content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content form.">
     <meta name="author" content="Han Xiao">
-    <meta name="keywords" content="GNES, neual network, deep learning, search, elastic search, cloud-native, kubernetes, docker swarm, docker container, semantic search, bert, vgg, alexnet, resnet, elmo, faiss, annoy">
+    <meta name="keywords"
+          content="GNES, neual network, deep learning, search, elastic search, cloud-native, kubernetes, docker swarm, docker container, semantic search, bert, vgg, alexnet, resnet, elmo, faiss, annoy">
     <meta property="og:type" content="website">
     <meta property="og:title" content="GNES is Generic Neural Elastic Search">
     <meta property="og:site_name" content="GNES is Generic Neural Elastic Search">
-    <meta property="og:description" content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content">
+    <meta property="og:description"
+          content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content">
     <meta property="og:locale" content="default">
     <meta property="og:image" content="https://gnes.ai/img/thumbnail.png">
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="GNES is Generic Neural Elastic Search">
-    <meta name="twitter:description" content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content">
+    <meta name="twitter:description"
+          content="GNES [jee-nes] is a cloud-native semantic search system based on deep neural network. It enables large-scale index and semantic search for text-to-text, image-to-image, video-to-video and any content">
     <meta name="twitter:image" content="https://gnes.ai/img/thumbnail.png">
     <meta name="twitter:creator" content="@hxiao">
     <link rel="icon" type="image/png" href="https://gnes.ai/favicon.png">
@@ -215,25 +219,36 @@
                     YAML config
                 </div>
                 <div class="card-body">
-                    <form action="/generate" method="post">
+                    <form action="/generate" method="post" class="board-form">
                         <div class="card-title">
                             <div class="btn-group" role="group" aria-label="Basic example">
                                 <button type="button" class="btn btn-secondary"
                                         data-clipboard-target="#simple-yaml-config">
                                     Copy
                                 </button>
-                                <input type="submit" class="btn btn-primary" value="Generate">
+                                <button type="submit" class="btn btn-primary">Generate</button>
                             </div>
                         </div>
                         <div class="card-text">
-
-
-                            <div class="form-group">
+                            <div class="form-group row">
                             <textarea name="yaml-config" class="form-control" id="simple-yaml-config" rows="20"
-                                      placeholder="your YAML config here" required autofocus style="font-family: monospace, monospace">
+                                      placeholder="your YAML config here" required autofocus
+                                      style="font-family: monospace, monospace">
 {{gnes-yaml}}
                             </textarea>
                             </div>
+                            <div class="form-group row">
+                                <label for="mermaid_direction">Rendering direction</label>
+                                <select name="mermaid_direction" class="form-control" id="mermaid_direction">
+                                    <option>Top-down</option>
+                                    <option>Left-right</option>
+                                </select>
+                            </div>
+                            <div class="form-group row">
+                                <label for="docker-image">Docker image</label>
+                                <input name="docker-image" type="text" class="form-control" id="docker-image"
+                                       value="gnes/gnes:latest">
+                            </div>
 
                         </div>
                     </form>