Créer une fonction pour afficher des images comme Jupyter / RStudio [Docker]

Aperçu

J'écris habituellement des scripts Python et R avec neovim, mais il était difficile d'ouvrir et de vérifier chaque fichier après avoir sorti le graphique au format png ou html. Je voulais une fonction qui ouvre automatiquement de nouveaux fichiers, alors je l'ai créée avec docker.

Tout d'abord, je n'ai pas fait grand-chose. Je serais heureux si vous pouviez le lire avec une tension comme "Hmm, il y a des gens qui pensent à ça."

Comment utiliser

Tout d'abord, enregistrez le script suivant sous docker-compose.yml [^ 1]. Veuillez rendre docker-compose disponible.

[^ 1]: Je pense que vous avez spécifié une image docker que vous n'avez pas vue, mais elle a été créée par moi. Puisqu'il est publié sur Docker Hub, vous devriez pouvoir docker pull normalement.

docker-compose.yml

version: "3"
services:
  websocket:
    image: dr666m1/image_watcher_websocket:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "9999:9999"
  webserver:
    image: dr666m1/image_watcher_webserver:version-0.0
    volumes:
      - .:/work/sync
    ports:
      - "8888:8888"
    depends_on:
      - websocket

Après cela, déplacez-vous vers le répertoire où vous prévoyez de sortir png et html, et démarrez / arrêtez avec la commande suivante ($ FILE_PATH est le précédent docker-compose.yml).

#Commencez
docker-compose -f $FILE_PATH --project-directory $(pwd) up -d

#Arrêtez
docker-compose -f $FILE_PATH --project-directory $(pwd) down

Si vous ouvrez http: // localhost: 8888 / dans le navigateur au démarrage, l'écran ressemblera à celui montré au début.

Comment ça fonctionne

Comme vous pouvez le voir dans docker-compose.yml, il y a deux conteneurs docker en cours d'exécution. Les rôles de chacun sont brièvement expliqués ci-dessous. Le code est posté sur mon github.

websocket (image_watcher_websocket) Je laisserai l'explication de ce qu'est WebSocket à d'autres articles. Le rôle de ce conteneur docker est:

• Détecte la création ou la mise à jour de fichiers png / html toutes les quelques secondes --Envoyer les informations du fichier détecté au navigateur

J'ai utilisé le package Python ** websocket-server ** pour l'implémentation.

webserver (image_watcher_webserver) Je laisserai l'explication de ce qu'est un serveur Web à d'autres articles. Le rôle de ce conteneur docker est:

--Accepte la requête sur le port local 8888 et renvoie ʻindex.html` Les fichiers --png / html sont également renvoyés sur demande

J'ai utilisé le package ** Flask ** de Python pour l'implémentation. ** React ** est fortement utilisé dans ʻindex.html`.

Engagement

Afficher / masquer

Vous pouvez basculer entre l'affichage et le masquage avec les touches «▶» et «▼» à gauche du nom du fichier.

Affichage sur un écran séparé

Si vous cliquez sur le nom du fichier, seul ce fichier peut être affiché sur un écran séparé.

Autre

Je suis un peu particulier sur la correction automatique de la largeur verticale de l'iframe en fonction du scrollHeight du fichier html, et l'implémentation du bouton pour revenir en haut.

finalement

Dans mon travail, j'écris uniquement Python, R et SQL pour l'analyse, j'ai donc appris à créer des écrans avec React.